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

最新推荐文章于 2023-07-12 20:22:21 发布

转载最新推荐文章于 2023-07-12 20:22:21 发布 · 2.8k 阅读

javascript 同时被 3 个专栏收录

311 篇文章

订阅专栏

CSS

84 篇文章

订阅专栏

HTML5

52 篇文章

订阅专栏

本文介绍了一种通过绝对定位和负margin值实现网页元素居中显示的方法，并详细解释了其工作原理，适用于多种浏览器。

问题出现的场景：（废话一堆）

登陆页面，qa测试时跟美工提议居中显示，但是美工最开始布局时没做到这点。

美工姐姐最开始的布局是：

banner padding-top 40px，然后设置main与banner的margin=0。

这样banner和main部分看起来是一个整体，整体距离浏览器上部分40px。

如何实现整体居中显示：

如果要实现整体页面上下居中，它们俩必须得是一个整体。我便在<body>标签中加了个class，使body中的两部分真正包含在一个整体中。接下来对这个整体<body class="mainLayout">进行设置：

1
.mainLayout
 {

2
    position:absolute;

3
    left:50%;

4
    top:50%;

5
    width:910px;

6
    margin-top:-270px; 

7
    margin-left: -455px; /*455为整体width910的一半*/

8
}

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

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

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

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

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

小结：

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