CSS实现水平垂直居中的的几种方式
<div class="box"> <div class="sub size">123123</div> </div> css: .box { border: 1px solid red; width: 300px; height: 300px; } .sub{ background: green; } .sub.size{ width: 100px; height: 100px; }
一: absolute + 负margin
子元素需要定宽高,相对于父元素的宽高
.box {
position: relative;
}
.sub {
position: absolute;;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
二、absolute + margin auto
通过设置各个方向的距离都是0,再将margin设为auto,就可以在各个方向上居中了。需要子元素定宽高。
.box { position: relative; } .sub { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
三、absolute + transform
不需要子元素固定宽高
.box { position: relative; } .sub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
四、css-table
css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中
.box { display: table-cell; text-align: center; vertical-align: middle; } .sub { display: inline-block; }
五:flex
.box { display: flex; justify-content: center; align-items: center; }