Site sections

CSS 居中 - 非常有趣!

Russ Weakley
08-Nov-03

你如何使用CSS将页面上的容器居中呢? 主要有两种方法可以做到，这取决于您的页面布局是流动（它会随着浏览器窗口大小的变化而相应变化）的还是固定宽度的。

流动布局的居中

在容器的每一个边使用margins对流动布局居中是很容易的。 margins可以被设置为em，pixel或者百分比。

div#container
{
margin-left: 10%;
margin-right: 10%;
}

固定宽度布局的居中

从理论上说,你应该能够使auto margins作用于容器的左右两边，并且这个容器应该在页面上居中。

W3C 的 Visual formatting model 陈述到："如果 'margin-left' 和 'margin-right' 都设置为 'auto', 则它们的值是相等的. 相对于容器的边缘，这使得元素能够水平居中。

因此, 使用以下规则能够使容器居中：

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

然而,一些浏览器并不能用这种方法使容器居中，因为它们忽略auto margins。这些浏览器包括：

通过添加两条简单规则，以上除了NN4的所有浏览器中，这个问题可以被解决。

1. 使body居中

尽管这些浏览器忽略了auto margins，它们仍然遵循“text-align: center”。如果这被应用于body，那么容器将会正确的居中。因此，要添加一条新规则。

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

2. 重新设置text-align

这条新规则唯一的问题是目前在页面中的所有内容全部居中了。要解决这个问题，在容器的规则集中要添加这样一条声明-"text-align: left"。最终的css代码如下：

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}

观察结果

在第一个示例页中，可以看到使用了auto margins将容器居中，但并没有对body元素使用居中。

在第二个示例页中，可以看到使用了auto margins将容器居中，并且也对body元素使用了居中，对容器使用了“text-align: left”。

Translations