css元素水平垂直居中
温习一下元素水平垂直居中的几种方法
元素有具体宽度
1、absolute+负边距
.LV_center{
border: 1px solid red;
position: absolute;
width: 100px;
height: 100px;
top:50%;
left: 50%;
margin-top:-原高度/2 ;
margin-left: -原高度/2
}
2、absolute+calc
.LV_center{
border: 1px solid red;
position: absolute;
width: 100px;
height: 100px;
top:calc(50% - 原高度/2);
left:calc(50% - 原高度/2);
}
3、absolute+margin auto
.LV_center{
border: 1px solid red;
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
元素宽度不定
1、absolute+transform,css3特性2d平移
.LV_center{
border: 1px solid red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
2、line-height,外层设置行高,内层继承行高
.box{
line-height: 300px;
}
.LV_center{
border: 1px solid red;
display: inline-block;
line-height: inherit;
vertical-align: middle;
}
3、table-cell,模拟td特性,让元素像表格里的td
.box{
border: 1px solid red;
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.LV_center{
border: 1px solid red;
display: inline-block;
}
4、flex弹性盒子
.LV_center{
border: 1px solid red;
display: flex;
justify-content: center; //主轴对齐方式
align-items: center; //位于主轴中心
}
推荐一位讲得更详细的 : https://www.jianshu.com/p/1b3337214941
css元素水平垂直居中的更多相关文章
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- CSS元素水平垂直居中的方法
1. 元素水平居中 1.1 设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...
- css元素水平垂直居中的十种方法
四月底在杭州金诚的前端面试过程中,问到了父元素中子元素水平和垂直居中的方式,因为平时疏于整理,只说上来两种.后来面试过了,所以现在回想到这个问题,所以针对各种情况集中整理一下. 首先看页面结构和元素的 ...
- CSS布局:元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
- css进阶 04-如何让一个元素水平垂直居中?
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- 【Web】CSS实现绝对定位元素水平垂直居中
网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- css 实现元素水平垂直居中总结5中方法
个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...
随机推荐
- Java常用关键字的原理及用法
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10843135.html 一:transient 用途:Java中一个类在定义时如果实现了Serilizabl ...
- django 权限设置-登录配置权限
1.首先需要一个判断用户是否拥有这个权限的name来区分在主页上是否显示标签 在permission中加入 name=models.CharField(max_length=32, verbose_n ...
- Linux应急响应
1.识别现象 top / ps -aux 监控与目标IP通信的进程 while true; do netstat -antp | grep [ip]; done 若恶意IP变化,恶意域名不变,使用ho ...
- WeUI教程/第三方扩展及其他UI框架对比
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.包含button.cell.dialog. progress. toa ...
- Spring和SpringMVC总结篇
作者:肥宅兜链接:https://www.cnblogs.com/doudouxiaoye/p/5693399.html 1.为什么使用Spring ? 方便解耦,简化开发;通过Spring提供的Io ...
- L3865
一,写题 1,2^j 判断不了? 2,好像是有一个数据不对.. 3,debug是生命之源. 4,反正就对了30分
- Visual Studio调试XSLT
Visual Studio是一个很大的工具.很容易遗漏一些有用的特性.希望XSLT调试器不会错过.在下面,您可以看到调试器正在运行,因为xslt转换正在应用于某些XML.(请原谅我在示例中使用的毫无意 ...
- 8259A的初始化(多片)
1.主从式8259A的初始化设置: 初始化设置如下: (1)中断触发方式:边沿触发 (2)中断屏蔽方式:常规屏蔽方式,即使用OCW1向IMR写屏码 (3)中断优先级排队方式:固定优先级的完全嵌套方式 ...
- 列表:list
#_*_coding:utf-8_*_#作者:王佃元#日期:2019/12/7'''数据类型整数字符串列表.元组name = 'wuchao'name = 'jinxin'name = 'xiaohu ...
- priority_queue(优先队列)使用方法
priority_queue默认是一个大根堆: 并且出队方式与普通队列queue的front不一样,是top . 如果想用小根堆,可以修改定义时的参数: priority_queue<int,v ...