如何使正文在页面上居中？

Question

我正在尝试将 body 元素置于我的 HTML 页面的中心。

基本上，在 CSS 中，我将 body 元素设置为 display: inline-block; 以便它的宽度与其内容一样宽。那很好用。但是， margin: 0px auto; 并未将其置于页面中心。

有谁知道如何解决这一问题？我希望蓝色大方块位于页面中央，而不是像现在这样向左浮动。

这是我的 CSS：

 body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}

原文由 Ryan Peschel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

还应用 text-align: center;在 html 元素上像这样：

 html {
  text-align: center;
}

一个更好的方法是有一个内部容器 div，它将被集中，而不是主体。

原文由 Madara‘s Ghost 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

这适用于大多数浏览器，包括 IE。

原文由 Freakishly 发布，翻译遵循 CC BY-SA 3.0 许可协议