如何在 Bootstrap 5 模态框头部实现标题与副文本垂直堆叠并居中显示

Bootstrap 5 的 .modal-header 默认使用 display: flex 布局，导致子元素（如 <h1> 和 <p>）水平排列；只需添加 flex-column 或 d-block 工具类即可改为垂直流式布局，并结合默认的 align-items: center 实现居中效果。

Bootstrap 5 的 `.modal-header` 默认使用 `display: flex` 布局，导致子元素（如 `` 和 `

`）水平排列；只需添加 `flex-column` 或 `d-block` 工具类即可改为垂直流式布局，并结合默认的 `align-items: center` 实现居中效果。

在 Bootstrap 5 中，.modal-header 内置了 display: flex 及 flex-direction: row 样式，这是其响应式设计的基础，但也意味着直接嵌套多个块级元素（如 <h1> 和 <p>）时，它们会默认横向并排——即使你为每个子元素添加 d-block，也无法改变父容器的 flex 主轴方向。

✅ 推荐方案：使用 flex-column

该方式最符合语义与设计意图：它将 flex 主轴转为纵向（flex-direction: column），同时保留 align-items: center（Bootstrap 默认已设置），因此标题与副文本天然垂直堆叠且水平居中：

<div class="modal-header flex-column"><h1 class="modal-title fs-5" id="exampleModalLabel">Review of "Product Name"</h1><p class="mb-0 text-center">Please review this product! Thank you for your cooperation!</p></div>

⚠️ 注意：为 <p> 添加 mb-0 可消除默认下边距（避免与 .modal-body 间距过大），text-center 则进一步确保纯文本内容在小屏等场景下严格居中（因 align-items: center 对齐的是 flex 项目本身，而内联文本需额外声明）。

❌ 替代方案：d-block 虽可行，但会完全退出 Flex 布局，失去 align-items 的对齐能力，此时需手动补充 text-center 到父容器或每个子元素，可维护性较低：

<!-- 不推荐：需额外处理居中 --><div class="modal-header d-block text-center"><h1 class="modal-title fs-5 mb-2">Review of "Product Name"</h1><p class="mb-0">Please review this product! Thank you for your cooperation!</p></div>

? 总结建议：

1. 优先选用 flex-column —— 语义清晰、样式继承合理、居中自动生效；
2. 避免修改原始 Bootstrap CSS 或强行覆盖 display，应充分利用内置工具类；
3. 如需微调垂直间距，使用 mb-* / mt-*（如 mb-3）比修改 height 更可靠、更响应式；
4. 所有方案均兼容 Bootstrap 5.3+，无需额外 JS 或自定义 CSS。