这个CSS代码如何将网页集中在一起？

Question

这个CSS代码如何将网页集中在一起？

html,
body {
    margin:0;
    padding:0;
    color:#000;
    background:#fff;
}
#body {
    width:870px;
    margin:0 auto;
    background:#ddd;
}

Answer 1

margin: auto;

将任何区块集中在一起。

但那不是body的中心，只是div，其ID为＆＃34; body＆＃34; （我觉得有点误导）。

Answer 2

在命名类或身份/头/脚/等时，要小心。您发布的代码将正常工作，因为margin:auto将使块居中，但该命名方案可能很容易导致一些意外更改。尝试使用#wrapper，#container或类似内容。

Answer 3

没有错。

body { ... }指的是整个页面，即文档的正文。

#body { ... }肯定是你ID = "body"身体的div。 CSS是正确的，因为它在左侧和右侧给出了固定宽度和自动边距。

Answer 4

这适用于现代浏览器，但您需要添加更多属性才能在旧版本的IE中使用它

html,
body {
    margin:0;
    padding:0;
    color:#000;
    background:#fff;
    text-align:center; /* align contents to center which will align #body center */

}
#body {
    width:870px;
    margin:0 auto;
    background:#ddd;
    text-align:left; /* re-arranges contents of #body to default left */
}