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

【问题标题】：How to center body on a page?如何使正文在页面上居中？
【发布时间】：2023-12-17 11:51:01
【问题描述】：

我正在尝试在我的 HTML 页面上将 body 元素居中。

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

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

这是我的 CSS：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

html {
  text-align: center;
}

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

【讨论】：

这正是所要求的，为什么它被否决了？ jsfiddle.net/gA9La/2
我还必须设置 body 的 display 属性才能工作：body {display: inline-block;}
@ParrisVarney 是的，这是隐含的（查看 OP 的 CSS）。
我认为 Freakishly 的回答比这个要好得多。无意冒犯 Madara，但它的答案应该是被接受的，而不是你的，因为你的提议不是让文本以外的其他项目居中的好方法。
@tanaydin 所以你加了body { text-align: initial; } 就好了:)

【解决方案3】：

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

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

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

【讨论】：

嗯..我认为可能是这种情况，但是..如果我事先不知道尺寸怎么办？
我尝试设置宽度并使用百分比，但它们都没有使主体居中。
@SRN -- 如果您仅使用 text 进行测试，margin 有什么用？文本也可以以text-align:center 为中心。检查：jsfiddle.net/gA9La/1
不，我不只是以文本为中心。大部分元素都是div。

【解决方案4】：

对于那些确实知道宽度的人，你可以这样做

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

我也同意不要在正文上设置 text-align:center，因为它会弄乱您的其余代码，您可能必须单独设置 text-align:left关于当时或将来的很多事情。

【讨论】：