如何在页面上居中？

Question

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

在此输入图像描述

基本上,在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;
}