我如何在身体中居中一个 h1答案

【问题标题】：How do I center an h1 in the body我如何在身体中居中一个 h1
【发布时间】：2014-01-10 18:21:43
【问题描述】：

我尝试将我的 h1 放在 body 标记中，如下所示：

h1 {margin:0 auto}

http://jsfiddle.net/qPDwY/

但它没有居中。我该如何解决？

【问题讨论】：

使用 text-align:center... jsfiddle.net/9bSnT .. h1 是一个宽度为 100% 的块级元素。margin:0 auto 在这种情况下不起作用。跨度>
text-align: center? h1 默认为 100% 宽度。
保证金：0自动；以固定或 100% 的宽度工作。你也可以使用 text-align: center;但这只会再次起作用，只要您网站上的宽度设置为 100% 或固定并自行居中。您应该注意的另一件事是使用 text-align: center;将全部居中，除非您特别指向特定的嵌套 h1，如此处 .yourclass h1 {text-align: center}

标签： css html-heading

【解决方案1】：

在这种情况下：

h1 {
    text-align:center;
}

jsFiddle example

margin:auto 规则用于在元素上设置宽度时使用，但您尚未这样做。

【讨论】：

【解决方案2】：

text-align: center 是最佳选择，但如果您仍想使用margin: 0 auto 将其居中，您必须为H1（块）元素分配一些宽度。

你可以通过给它margin-left和 auto 的 margin-right （并且 它有一个固定的宽度，否则它会是全宽，不需要居中）。这通常是用像这样的速记：
.center-me {
  margin: 0 auto;
}
来源： https://css-tricks.com/centering-css-complete-guide/#horizontal-block

【讨论】：

【解决方案3】：

您可以通过设置宽度使其居中。

<body>
     <h1>My Title</h1>

</body>

CSS

h1 {
    width:500px;
    margin: 0 auto;
    background: gray;
    text-align: center;
}

【讨论】：

【解决方案4】：

或者，你可以试试这个：

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

【讨论】：

默认情况下，h1 是块级元素，没有宽度，margin:0 auto 什么都不做。

【解决方案5】：

-div style="margin:0 auto; text-align:left; width:80px;"- 样品

改变宽度改变位置

【讨论】：

【解决方案6】：

j09691 所说的确实有效，但并非一直有效。

这就是我使用的原因：

/* Put this inside element/class. */
transform: translateX(400px);

如果它不适合您的屏幕中心，只需调整它。当然，你可以使用一些 css 和/或 js 魔法来自动调整它。

【讨论】：