本文详解如何使用 bootstrap 的 flexbox 工具类（如 `justify-content-center`）精准居中包含标题、段落和表格的整组内容，解决因表格默认左对齐导致的布局偏移问题。
在 Bootstrap 4+ 中，
默认采用 Flexbox 布局，但其子元素（即 .col-* 列）会沿主轴（水平方向）默认左对齐。当某列内含 时，由于 是块级元素且默认不继承父容器的文本对齐行为，容易造成视觉上“未居中”的错觉——尤其当左右两列宽度不均或右侧列含宽表格时，整体内容会明显右偏。
| Monday | 9:30 - 18:30 |
| Tuesday | 9:30 - 18:30 |
⚠️ 注意事项：
- 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-* 系列工具类，能高效、语义化地解决包括表格在内的复合内容居中难题。
