比如,有一大一小两个容器,请问如何将小容器垂直居中?
<div id="big">
<div id="small">
</div>
</div>
首先,将大容器的定位为relative。
#big{
position:relative;
height:480px;
}
然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。
#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
使用同样的思路,也可以做出水平居中的效果。