本文详解如何使用 bootstrap 5 的 flexbox 工具类（如 `justify-content-center`）精准居中包含标题、段落和表格在内的整组内容，解决因表格默认左对齐导致的布局偏移问题。
在 Bootstrap 布局中，当一个 .row 内部包含多个 .col-* 列（例如两个 col-md-6），该行本身默认采用 Flexbox 的 justify-content: flex-start 行为——即子列从左侧开始排列，不会自动居中。尤其当右侧列内含
| Monday | 9:30 - 18:30 |
| Tuesday | 9:30 - 18:30 |
⚠️ 注意事项：
- justify-content-center 作用于 Flex 容器（即 .row），而非单个列或表格本身；不要尝试给
加 text-center 或 mx-auto——这通常无效，因为表格默认 display: table，不响应 margin: auto 居中（除非显式设 display: block）。
- 若需进一步微调表格内部对齐，可在
上添加 text-center（居中单元格文字）或为
设置 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 的最佳实践，适用于任何含混合内容（文本、图片、表格、表单等）的响应式布局场景。
- 若需进一步微调表格内部对齐，可在
