本文详解如何使用 bootstrap 的 flexbox 工具类（如 `justify-content-center`）精准居中包含标题、段落和表格的整组内容，解决因表格默认左对齐导致的布局偏移问题。
在 Bootstrap 4+ 中，
默认采用 Flexbox 布局，但其子元素（即 .col-* 列）会沿主轴（水平方向）
默认左对齐。当某列内含
时，由于 是块级元素且默认不继承父容器的文本对齐行为，容易造成视觉上“未居中”的错觉——尤其当左右两列宽度不均或右侧列含宽表格时，整体内容会明显右偏。✅ 正确解法：不在表格内部加 text-center 或 margin: 0 auto，而是在包裹整个内容区域的 .row 上添加 justify-content-center。该类直接作用于 Flex 容器，使所有子列（.col-md-6 等）在行内水平居中对齐，从而实现整块内容（含表格）的视觉居中。
以下是修复后的关键代码片段（仅展示核心结构）：
<!-- ✅ 正确：为外层 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>
<!-- 表格无需额外居中样式，父级 flex 居中已生效 -->
<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 必须加在 *直接包含 `.col-的.row上**，而非嵌套更深的行（如内部row`）；
- 避免混合使用旧式居中方式（如 text-align: center 作用于
），这可能导致表格内单元格文字居中但整体仍左偏；- 若需响应式适配，可叠加断点类，如 justify-content-md-center（仅在 md 及以上屏幕居中）；
- 推荐为
添加 table-borderless 和 mb-0（移除默认下边距），保持视觉紧凑性；- 若 .col-md-9 宽度本身已接近容器全宽，居中效果可能不明显——此时建议改用 .col-lg-8 或 .col-xl-6 配合 justify-content-center，确保留有足够侧边空白以凸显居中效果。
总结：居中布局的本质是控制 Flex 容器的主轴对齐，而非逐个元素“打补丁”。掌握 justify-content-* 系列工具类，能高效、语义化地解决包括表格在内的复合内容居中难题。
