div+css：页面总体布局居中显示：上下居中||垂直居中，左右居中||水平居中

时间 2019-11-11

标签 div+css div css 页面总体布局居中显示上下垂直左右水平栏目 HTML 繁體版

原文原文链接

如何实现总体居中显示：

若是要实现总体页面上下居中，在<body>标签中加了个class，<body class="mainLayout"> 而后对mainLayout进行设置： css

.mainLayout {
    position:absolute;
    left:50%;
    top:50%;
    width:910px; /*你的实际页面的宽度*/
    margin-top:-270px;  
    margin-left: -455px; /*455为总体width(这里是910)的一半*/
}

这是使用绝对定位和负margin值实现的。 chrome

left:50% 会让整个mainlayout容器从浏览器水平方向的中点开始往右显示，此时浏览器左边的一半是空的。浏览器

而后设置 margin-left为mainlayout容器的一半，设置为负值是让容器能再向左移动，也就是将整个容器从浏览器中点往左边挪动它（mainlayout容器）自己的一半。这样mainlayout容器恰好就可以左右居中显示了。 spa

上下居中显示的原理同样：先top：50%让容器从垂直方向的中点向下显示，上面空出一半。而后再向上移动mainlayout容器的一半，使之垂直居中。 code

这样子的实现貌似兼容全部浏览器哦~（我自测了chrome ff ie7-10） it

小结：

以前大概知道这个方法，但没有弄明白原理。今天碰到了这个任务，也终于看懂了，就索性废话一堆的记录下来，为那些和我同样糊里糊涂的孩子。(*^__^*) io