如何在使用 display: block 的情况下居中段落文本

本文讲解如何在保持段落响应式换行（display: block）的同时，通过 CSS 简洁、可靠地实现标题与所有段落的水平居中布局，避免绝对定位导致的重叠问题。

本文讲解如何在保持段落响应式换行（`display: block`）的同时，通过 css 简洁、可靠地实现标题与所有段落的水平居中布局，避免绝对定位导致的重叠问题。

要让 <h1> 和多个 <p> 元素在页面中水平居中，关键在于控制块级元素的外边距行为，而非依赖 position: absolute（易引发重叠、破坏文档流）。你当前的 CSS 已设置 display: block（这是 <p> 的默认行为，无需显式声明）和 max-width: 60%，这一步非常正确——它限制了文本宽度，提升可读性并支持响应式换行。

真正缺失的是居中所需的自动外边距。对设置了明确宽度（或 max-width）的块级元素，只需添加 margin: auto，浏览器便会将左右外边距均分，从而实现水平居中：

p {
  max-width: 60%;
  margin: auto; /* 关键：触发水平居中 */
}

同时，别忘了为标题也应用相同逻辑，确保视觉一致性：

#centerHeading {
  text-align: center; /* 或者用 margin: auto + max-width（若需限制宽度） */
  margin: 0 auto 2rem auto; /* 上下外边距可单独调整，左右 auto 居中 */
}

✅ 注意事项：

• margin: auto 仅对具有明确宽度（width）或最大宽度（max-width）的块级元素生效；你已设置 max-width: 60%，因此完全适用。
• 避免滥用 <br><br> 实现间距——它破坏语义且难以维护。改用 margin-top/margin-bottom（如你已用的 mb-5 类）更可控、更符合 Bootstrap 最佳实践。
• 若使用 Bootstrap 5+，可直接利用其内置工具类简化操作：<p class=”mx-auto max-w-lg”>（需配合自定义 max-w-lg 或使用 w-75 等宽度类），但原生 CSS 方案兼容性更广、更易调试。

最终效果：所有段落与标题在视口内水平居中，文本随屏幕宽度自动换行，移动端阅读体验流畅，且无重叠风险。