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

在 Bootstrap 4+ 中，

默认采用 Flexbox 布局，但其子元素（即 .col-* 列）会沿主轴（水平方向）默认左对齐。当某列内含 时，由于 是块级元素且默认不继承父容器的文本对齐行为，容易造成视觉上“未居中”的错觉——尤其当左右两列宽度不均或右侧列含宽表格时，整体内容会明显右偏。

✅ 正确解法：不在表格内部加 text-center 或 margin: 0 auto，而是在包裹整个内容区域的 .row 上添加 justify-content-center。该类直接作用于 Flex 容器，使所有子列（.col-md-6 等）在行内水平居中对齐，从而实现整块内容（含表格）的视觉居中。

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

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

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-* 系列工具类，能高效、语义化地解决包括表格在内的复合内容居中难题。