如果要实现整体页面上下居中，它们俩必须得是一个整体。我便在
标签中加了个class，使body中的两部分真正包含在一个整体中。接下来对这个整体进行设置：
- .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
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
