本文详解如何使用 bootstrap 5 的 flexbox 工具类（如 `justify-content-center`）精准居中包含标题、段落和表格在内的整组内容，解决因表格默认左对齐导致的布局偏移问题。
在 Bootstrap 布局中，当一个 .row 内部包含多个 .col-* 列（例如两个 col-md-6），该行本身默认采用 Flexbox 的 justify-content: flex-start 行为——即子列从左侧开始排列，不会自动居中。尤其当右侧列内含 <table> 时，表格作为块级元素默认不继承父容器的文本对齐样式，且无显式宽度控制，极易造成视觉上“内容靠左”的错觉，进而让用户误以为整个区块无法居中。
✅ 正确解法：直接在包裹目标内容的 .row 上添加 justify-content-center 工具类。该类会将 Flex 容器的主轴对齐方式设为 center，使所有子列（包括含表格的列）整体水平居中于其父容器（如 .container-fluid 或外层 .row）。
以下是修复后的关键代码片段（仅展示核心结构）：
<!-- ✅ 关键修改：为包含左右两栏的 row 添加 justify-content-center -->
<div class="row justify-content-center">
<div class="col-md-9 border-right border-bottom border-dark" id="OpenTime">
<div class="row">
<div class="col-md-6">
<h1 style="font-family: Playfair Display;">Test Barbershop</h1>
<p style="font-family: Quicksand; text-align: justify;">...</p>
</div>
<div class="col-md-6" id="OpenTime">
<h1 style="font-family: Playfair Display;">Opening hours</h1>
<p style="font-family: Quicksand;">Hours could change...</p>
<table class="table table-borderless mb-0"> <!-- 推荐增强可读性 -->
<tr><td>Monday</td><td>9:30 - 18:30</td></tr>
<tr><td>Tuesday</td><td>9:30 - 18:30</td></tr>
<!-- 其他行保持不变 -->
</table>
</div>
</div>
</div>
</div>⚠️ 注意事项：
- justify-content-center 作用于 Flex 容器（即 .row），而非单个列或表格本身；不要尝试给 <table> 加 text-center 或 mx-auto——这通常无效，因为表格默认 display: table，不响应 margin: auto 居中（除非显式设 display: block）。
- 若需进一步微调表格内部对齐，可在 <table> 上添加 text-center（居中单元格文字）或为 <td> 设置 text-start/text-end。
- 确保 Bootstrap 5+ CSS 已正确加载（justify-content-center 在 Bootstrap 4.4+ 和 5.x 中均可用）。
- 避免重复 ID（如示例中两个 id="OpenTime"），应改为唯一 ID 或使用 class 替代。
? 总结：居中整块内容的核心在于控制其直接父 Flex 容器的对齐方式，而非逐个元素设置样式。justify-content-center 是语义清晰、兼容性强、零额外 CSS 的最佳实践，适用于任何含混合内容（文本、图片、表格、表单等）的响应式布局场景。
