css - 这个 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居中的，只是一个divid 是“body”的（我觉得有点误导）。

Answer 2

将类或 ID 命名为与 body/head/footer/etc 相同时要小心。您发布的代码可以正常工作，因为它margin:auto将使块居中，但该命名方案很容易导致一些意外更改。尝试使用#wrapper,#container或类似的东西。

Answer 3

没有任何错误。

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

#body { ... }肯定是你体内的一个 div ID = "body"。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 */
}