本文详解如何使用 bootstrap 5 的 flexbox 工具类（如 `justify-content-center`）精准居中包含标题、段落和表格的整块内容，解决因表格默认左对齐导致的布局偏移问题。
在 bootstrap 布局中，当一个 .row 内部包含多个 .col-* 列（例如本例中的两个 col-md-6），且该行本身未设置对齐方式时，其子列会按文档流从左到右依次排列——即使父容器宽度足够，也不会自动水平居中。尤其当右侧列内含
| Monday | 9:30 – 18:30 |
| Tuesday | 9:30 – 18:30 |
? 关键注意事项：
- 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 居中）。
? 进阶提示：
若希望表格内容也统一右对齐时间列，可为
Monday 9:30 – 18:30 综上，通过一行语义化工具类 justify-content-center，即可优雅、可靠地实现整行内容（含表格）的水平居中，无需浮动、负边距或冗余 wrapper，符合现代 CSS 最佳实践。