原理
我们常常使用margin:0 auto;来实现块水平居中布局,这是因为默认情况下块级元素会占满一整行,若其设置了宽,之前占满一行的特性被覆盖掉了,从而产生了空白空间,而margin的auto值就是用来自动分配这些空间(两边auto,剩余宽度对半分);
可是为什么没法垂直居中呢?块级元素的宽会占满一行,高度可没有这种特性,当然也不存在空白空间了。(这样说可能有点不太准确,但我的理解是这样);
我们知道absolute如果将top/bottom/left/right都设为0,改元素就会拉伸从而占满父元素,此时我们为它设置宽高去覆盖此特性,从而会产生空白空间,margin:auto;等分配空间,从而达到完全居中的效果。(经测试IE8及以上版本才支持此方法)
实现
.father1{
height:200px;
position: relative;
background: #eee;
}
.son1{
position:absolute;
top:0;
right: 0;
bottom:0;
left: 0;
height:100px;
width:500px;
background: pink;
margin:auto;
}
<!-- absolute与margin居中 -->
<div class="father1">
<div class="son1">IE8+</div>
</div>
magrin的其他一些应用(代码):
https://github.com/screamingColor/save/blob/master/test/margin.html