时间:2021-07-01 10:21:17 帮助过:10人阅读
.mainLayout { position :absolute; left : 50%; top : 50%; width : 910px; margin-top : -270px; margin-left : -455px;}
这是使用绝对定位和负margin值实现的。
left:50% 会让整个mainlayout容器从浏览器水平方向的中点开始往右显示,此时浏览器左边的一半是空的。
然后设置 margin-left为mainlayout容器的一半,设置为负值是让容器能再向左移动,也就是将整个容器从浏览器中点往左边挪动它(mainlayout容器)本身的一半。这样mainlayout容器刚好就能够左右居中显示了。
上下居中显示的原理一样:先top:50%让容器从垂直方向的中点向下显示,上面空出一半。然后再向上移动mainlayout容器的一半,使之垂直居中。
原文链接 : http://my.oschina.net/suyewanwan/blog/110784