本文详解如何使用 bootstrap 5 的 flexbox 工具类（如 `justify-content-center`）精准居中包含标题、段落和表格在内的整组内容，解决因表格默认左对齐导致的布局偏移问题。

在 Bootstrap 布局中，当一个 .row 内部包含多个 .col-* 列（例如两个 col-md-6），该行本身默认采用 Flexbox 的 justify-content: flex-start 行为——即子列从左侧开始排列，不会自动居中。尤其当右侧列内含

时，表格作为块级元素默认不继承父容器的文本对齐样式，且无显式宽度控制，极易造成视觉上“内容靠左”的错觉，进而让用户误以为整个区块无法居中。

✅ 正确解法：直接在包裹目标内容的 .row 上添加 justify-content-center 工具类。该类会将 Flex 容器的主轴对齐方式设为 center，使所有子列（包括含表格的列）整体水平居中于其父容器（如 .container-fluid 或外层 .row）。

以下是修复后的关键代码片段（仅展示核心结构）：

  
    
      
        
Test Barbershop
        
...
      
      
        
Opening hours
        
Hours could change...
        

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 的最佳实践，适用于任何含混合内容（文本、图片、表格、表单等）的响应式布局场景。