这篇文章上次修改于 859 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

样式重置

首先,我们创建一个新页面,先在 “Head” 标签加入 “style” 标签,以开始键入我们的第一个 CSS 属性。

<style>
    body{
        margin: 0;
        padding: 0;
    }
</style>

上面的代码帮我们去除了 body 自身的内间距和外间距,这样就不会影响到我们稍后布置的页面内容啦~

开始编写

随后我们就可以开始进入今天的正题了。
首先我们先给页面新建一个 DIV,例如这样:

<div class="div1">
    <p>世界,你好!</p>
</div>

然后添加一段 CSS 属性:

.div1{
    width: 500px;      /* 500像素的宽度 */
    height: 300px;     /* 300像素的高度 */
    overflow: auto;    /* 防止框架内容的溢出*/
    background: #3CC;  /* 蓝色的背景 */
    
}

就实现了这样一个简单的 DIV 框架了。

Make-A-Global-Center-Page-1.jpg

由于我们要想办法让“DIV1”全局居中,在这里我个人建议在“DIV1”的外面再新建一层 DIV,用于控制它的位置。这样的 DIV,大多数人称做“Container”。

<div class="container">
    <div class="div1">
        <p>世界,你好!</p>
    </div>
</div>

然后给“Container”添加一段 CSS,让他显示在页面50%的位置。

.container{
    top: 50%;            /* 上边为窗口50%的位置 */
    left: 50%;           /* 左边为窗口50%的位置 */
    position: absolute;  /* 绝对定位 */
}

随后问题来了,为什么框架整体好像往右下角偏移了?

Make-A-Global-Center-Page-2.jpg

内容偏移了?

因为我们采用的是 Absolute 绝对定位,网页和 DIV 框架都是以左上角为对其点,所以你看到的框架就会有偏移现象。那么我们该如何让它“偏移回来”呢?

仔细看效果图你会发现,如果以“DIV1”的左上角为准,这个点的位置正好是这个页面的中心位置。
所以我们让“DIV1”往回偏移一半的大小,就可以让它完全居中显示了。具体做法是这样:

.container{
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -150px;   /* 往上偏移150像素,也就是DIV1高度的一半大小(DIV1的高度是300像素)*/
    margin-left: -250px;  /* 往左偏移250像素,也就是DIV1宽度的一半大小(DIV1的宽度是500像素)*/
}

随后我们看到的页面就是全局居中的效果了。

Make-A-Global-Center-Page-3.jpg

其他实现方案

当然,下面还有很多种方法均可以实现相同的效果。不过他们之间的区别,主要体现就是对浏览器的兼容性有所不同。

Calc 计算方法

还有一种方法是用 CSS3 的 calc 函数,例如这样写:

.container{
    position: absolute;
    top: calc(50% - 150px);   /* 上边为窗口50%的位置,并往上偏移150像素 */
    left: calc(50% - 250px);  /* 左边为窗口50%的位置,并往左偏移250像素 */
}

PS:运算符的左右两侧必须包含空格符。只能写成 “ - ” 而不是 “-”。
值得注意的是,calc 函数不兼容一些使用老旧标准的浏览器,例如臭名远扬的 IE 系列。


自动外间距方法

下段方法于 17.02.26 补充,这样给子元素设置就可以全局居中了,还不需要给父元素(.container)设置任何属性...

.div1{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 500px;
    height: 300px;
    overflow: auto;
    background: #3CC;
    position: absolute;
}

运行地址:https://jsfiddle.net/3saj7r8L


Flex 方法

下段方法于 17.11.29 补充,还可以用 Flex 弹性盒子模型的方法设置居中,代码还更简单,不过不太兼容老旧浏览器。

body{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
}

没错,子元素不需要设置宽度和高度就能自动适应。
运行地址:https://jsfiddle.net/3saj7r8L/1/

细化页面

最后我们再把这个页面细化,可以将其做的更加美观。

Make-A-Global-Center-Page-4.jpg

当然,你也可以做的比我这个更好看。
如果对本文有什么疑问,欢迎在这里评论和我交流~