Html 如何在页面中心对齐标题

我想把它放在页面的中间或中间。我找到的唯一解决办法是

body { text-align: center; }

但是我不明白为什么这个代码不起作用。显示：使用内联块是因为我希望边框环绕我的边框

身体{ 保证金：0； } navbar先生{ 文本对齐：右对齐； 背景：黑色； 颜色：白色； 填充：10px； } 保险商实验室{ 列表样式类型：无； 填充物：5px； } 李{ 显示：内联块； } .标题{ 边框：2件纯黑； 显示：内联块； 文本对齐：居中； } 家 关于 联系 标题 添加以下内容：

.heading {
  text-align: center; 
}

…并从.heading中删除显示：内联块。相反，添加这个

.heading h1 {
  display: inline-block;
}

---

.标题是您的h1的容器。默认情况下，两者都是100%宽的。这将使内联块h1在整个宽度内居中。标题

您要寻找的秘密是使用块级元素，并设置边距：0自动。这告诉块居中，就像标准的文本对齐：居中

默认情况下，块级元素占据其容器宽度的100%，因此您可能还需要为标题指定宽度。或者，您可以通过添加设置为in inline block的容器div并将边框移动到其中，使标题自动调整到文本的大小：

身体{ 保证金：0； } navbar先生{ 文本对齐：右对齐； 背景：黑色； 颜色：白色； 填充：10px； } 保险商实验室{ 列表样式类型：无； 填充物：5px； } 李{ 显示：内联块； } .标题{ 显示：块； 保证金：0自动； 文本对齐：居中； } .标题包装{ 显示：内联块； 边框：2件纯黑； 填充：0 10px； } 家 关于 联系 标题

---

默认情况下，div显示块，因此，如果要以其他方式显示它，则声明它绝对重要

然而，正如我在前面的另一篇文章中所看到的，您没有用于包含父项的css，标题，这将极大地帮助您。您应该将任何要继承的边距应用于此，并且不需要对div应用较小的宽度

身体{ 保证金：0； } 标题{边距：0自动；} navbar先生{ 文本对齐：右对齐； 背景：黑色； 颜色：白色； 填充：10px； } 保险商实验室{ 列表样式类型：无； 填充物：5px； } 李{ 显示：内联块； } .标题{ 边框：2件纯黑； /*display:block；-即使您省略此选项，它也将显示为block*/ 文本对齐：居中； } 家 关于 联系 标题

---

可以使用display:flex将其居中；论证内容；在父元素上。这里有一个关于以事物为中心的很好的资源

身体{ 保证金：0； } navbar先生{ 文本对齐：右对齐； 背景：黑色； 颜色：白色； 填充：10px； } 保险商实验室{ 列表样式类型：无； 填充物：5px； } 李{ 显示：内联块； } .标题{ 显示器：flex； 证明内容：中心； } 家 关于 联系 标题

---

您应该显示block，否则标题会显示在左侧请参见：即使有1个代表，您也可以通过将鼠标悬停在答案旁边并单击绿色时出现的复选标记来接受答案。通过接受回答，您将获得2分，并且第一次接受时将获得一枚徽章。当你年满15岁时，你也可以投票。。你会到达那里的。欢迎来到stackoverflow和快乐编码。。

.header {
  display: block;
  margin: 0 auto;
}