本文详解如何使用 bootstrap 5 的 flexbox 工具类（如 `justify-content-center`）精准居中包含标题、段落和表格的整块内容，解决因表格默认左对齐导致的布局偏移问题。
在 Bootstrap 布局中，当一个 .row 内部包含多个 .col-* 列（例如本例中的两个 col-md-6），且该行本身未设置对齐方式时，其子列会按文档流从左到右依次排列——即使父容器宽度足够，也不会自动水平居中。尤其当右侧列内含 <table> 元素时，由于 <table> 默认为块级元素且不继承父级文本对齐样式，容易造成视觉上“未居中”的错觉。
✅ 正确解法：为包裹内容的 .row 添加 justify-content-center 类
该类基于 CSS Flexbox 的 justify-content: center，使所有直接子列（.col-*）在主轴（水平方向）上整体居中对齐，而非仅对齐内部文字。
<!-- ✅ 推荐写法：在目标 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"> <!-- 右侧含表格的内容 -->
<h1>Opening hours</h1>
<p>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 必须作用于 *直接包裹 `.col-的.row`**，而非外层容器或嵌套更深的行；
- 避免混合使用 text-align: center（仅影响内联内容）与 Flex 居中，二者逻辑不同，易引发冲突；
- 表格本身无需额外居中（如 margin: 0 auto），因其已随所在列整体居中；若需微调表格内单元格对齐，可用 text-center（Bootstrap 5）或 text-align: center；
- 响应式安全：justify-content-center 在所有断点均生效；如需仅在特定屏幕尺寸居中，可使用响应式变体，如 justify-content-md-center（仅 ≥768px 居中）。
? 进阶提示：
若希望表格内容也统一右对齐时间列，可为 <td> 添加 text-end 类（Bootstrap 5）或自定义 CSS：
<tr><td class="fw-medium">Monday</td><td class="text-end">9:30 – 18:30</td></tr>
综上，通过一行语义化工具类 justify-content-center，即可优雅、可靠地实现整行内容（含表格）的水平居中，无需浮动、负边距或冗余 wrapper，符合现代 CSS 最佳实践。
