本文讲解如何在保持段落响应式换行（display: block）的同时，让标题和所有段落水平居中显示，避免重叠或布局错乱，适用于 Bootstrap 项目中的 About 页面排版。

本文讲解如何在保持段落响应式换行（`display: block`）的同时，让标题和所有段落水平居中显示，避免重叠或布局错乱，适用于 bootstrap 项目中的 about 页面排版。

要实现标题与多个段落整体居中、文字自动换行且适配移动端，关键在于正确理解 margin: auto 的作用机制——它仅对设置了明确宽度（如 max-width）的块级元素生效，并使其左右外边距自动均分，从而达到水平居中效果。

你当前的 CSS 中已设置了 max-width: 60%，这为居中提供了前提条件，但缺少 margin: auto。只需补充该声明即可：

p {
  display: block; /* 默认即为 block，可省略 */
  max-width: 60%;
  margin: auto; /* ✅ 核心：触发水平居中 */
}

同时，为确保 <h1> 同样居中，也应为其添加居中样式（注意：text-align: center 仅居中文本内容，而 margin: auto 配合 max-width 才能真正居中整个块容器）：

#centerHeading {
  max-width: 60%;
  margin: 0 auto 2rem; /* 上边距为0，下边距保留视觉间距 */
  text-align: center; /* 确保内部加粗文本也居中对齐 */
}

⚠️ 注意事项：

• 不要滥用 <br><br> 强制换行——它破坏语义且难以控制间距。改用 margin-bottom 或 padding-bottom（如你已使用的 mb-5 pb-5）更可控、更符合 Bootstrap 响应式规范；
• display: block 是 <p> 的默认行为，无需显式声明；
• 若使用 Bootstrap 的栅格系统（如 .col-md-12），其本身已具备响应式宽度，配合 max-width + margin: auto 可兼顾灵活性与一致性；
• 在小屏幕（如手机）上，max-width: 60% 可能过窄，建议改用相对单位或媒体查询优化：

p, #centerHeading {
  max-width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  p, #centerHeading {
    max-width: 60%;
  }
}

这样既保证移动端有充足阅读宽度，又在桌面端维持优雅的留白比例。最终效果：标题与所有段落统一居中、文字自然换行、间距协调、无重叠，且完全响应式。