让元素水平垂直居中的几种方式
平时我们做项目的时候很多情况会遇到让元素水平垂直居中的场景,可能场景不同,所以需要用不同的方式,下里面是可以实现的6种方式和他们的使用场景。
列如有个设定好的div,下面是他的样式
定位的话分为3种也可以说是三种情况,都是依赖于定位实现的。
1.定位
(1) 缺点:需要具体宽高的情况下使用
.box{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
(2)不需要知道具体宽高的情况下,但是必须得有宽高
.box{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
(3) 也不需要有宽高,但是必须有内容撑开就好,缺点:css3的兼容性问题,