本文讲解如何在保持段落响应式换行（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; /* ✅ 核心：触发水平居中 */
}
同时，为确保
同样居中，也应为其添加居中样式（注意：text-align: center 仅居中文本内容，而 margin: auto 配合 max-width 才能真正居中整个块容器）：#centerHeading {
max-width: 60%;
margin: 0 auto 2rem; /* 上边距为0，下边距保留视觉间距 */
text-align: center; /* 确保内部加粗文本也居中对齐 */
}
⚠️ 注意事项：
- 不要滥用
强制换行——它破坏语义且难以控制间距。改用 margin-bottom 或 padding-bottom（如你已使用的 mb-5 pb-5）更可控、更符合 Bootstrap 响应式规范； - display: block 是
的默认行为，无需显式声明；
- 若使用 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%;
}
}
这样既保证移动端有充足阅读宽度，又在桌面端维持优雅的留白比例。最终效果：标题与所有段落统一居中、文字自然换行、间距协调、无重叠，且完全响应式。
