Question

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

enter image description here

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

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

这是我的CSS：

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

Answer 1

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

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

Answer 2

同样适用text-align：center;在html元素上如此：

html {
  text-align: center;
}

更好的方法是拥有一个内部容器div，它将是集中的，而不是正文。

Answer 3

您必须指定正文的宽度，使其在页面上居中。

<body>
    <div>
    jhfgdfjh
    </div>
</body>

div {
    margin: 0px auto;
    width:400px;
}

Answer 4

对于做知道宽度的人，您可以执行类似

的操作

div {
     max-width: ???px; //px,%
     margin-left:auto;
     margin-right:auto;
}

我同意不在主体上设置 text-align：center ，因为它会弄乱你的其余代码，你可能需要单独设置 text-align：left < / strong>当时或将来的许多事情。