文字的水平居中
将一段文字置于容器的水平中点,只要设置text-align:center属性即可
文字的垂直居中
单行文字的垂直居中,只要将行高与容器高设为相等即可。
比如,容器中有一行数字: <div id="container">1234567890</div>
然后CSS这样写:div#container {height: 35px; line-height: 35px;}
容器的垂直居中
(其实这也属于层叠关系,position的属性)
比如,有一大一小两个容器,将小容器垂直居中:
<div id="big">
<div id="small">
</div>
</div>
首先,将大容器的定位为relative。
div#big{
position:relative;
height:480px;
}
然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。
div#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
使用同样的思路,也可以做出水平居中的效果。
容器的水平居中
先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可。