如何使用CSS实现页面中h1和p标签的文本居中？

Hey there, let's get your h1 and p tags centered exactly how you want! Here's a polished solution based on the code you shared, with explanations to help you understand how it works:

完整代码示例 #

HTML

<div class="green">
  <div class="content">
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
    <p>Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo...</p>
  </div>
</div>
<div class="orange">
  <div class="content">
    <h1>Another centered heading</h1>
    <p>And this paragraph is centered too!</p>
  </div>
</div>

CSS

div {
  height: 500px;
  padding: 0;
  margin: 0;
  text-align: center;
}

h1, p {
  padding: inherit;
  margin: inherit;
}

.green {
  background-color: forestgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orange {
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  max-width: 80%; /* 限制内容宽度，避免文本过宽影响阅读 */
}

关键细节解释 #

• 水平居中基础：父容器的text-align: center会让内部的行内/行内块元素（比如h1、p）自动实现水平居中，这是最基础的文本居中方式。
• 垂直+水平双居中：.green和.orange类里的Flexbox属性组合(display: flex; align-items: center; justify-content: center;)是当前实现元素双居中最简洁的方案，它能让内容块在500px高的容器里完美居中，不管内容长度如何。
• 统一内外边距：给h1和p设置padding: inherit; margin: inherit;，让它们继承父容器的内外边距，避免出现不必要的间距差异，保持样式统一。
• 优化阅读体验：添加.content容器并设置max-width，能让长文本换行后依然保持居中，同时避免文本过宽导致阅读疲劳。

内容的提问来源于stack exchange，提问作者Punam