Bootstrap表格内容居中方法

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《Bootstrap 中如何居中表格内容》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

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

在 Bootstrap 布局中，当一个 .row 内部包含多个 .col-* 列（例如本例中的两个 col-md-6），且该行本身未设置对齐方式时，其子列会按文档流从左到右依次排列——即使父容器宽度足够，也不会自动水平居中。尤其当右侧列内含

✅ 正确解法：为包裹内容的 .row 添加 justify-content-center 类
该类基于 CSS Flexbox 的 justify-content: center，使所有直接子列（.col-*）在主轴（水平方向）上整体居中对齐，而非仅对齐内部文字。

<!-- ✅ 推荐写法：在目标 row 上添加 justify-content-center -->
<div class="row justify-content-center">
  <div class="col-md-9 border-right border-bottom border-dark" id="OpenTime">
    <div class="row">
      <div class="col-md-6"> <!-- 左侧内容 -->
        <h1 style="font-family: Playfair Display;">Test Barbershop</h1>
        <p style="font-family: Quicksand; text-align: justify;">...</p>
      </div>
      <div class="col-md-6"> <!-- 右侧含表格的内容 -->
        <h1>Opening hours</h1>
        <p>Hours could change...</p>
        <table class="table table-borderless mb-0"> <!-- 建议增强可读性 -->
          <tr><td>Monday</td><td>9:30 – 18:30</td></tr>
          <tr><td>Tuesday</td><td>9:30 – 18:30</td></tr>
          <!-- 更多行... -->
        </table>
      </div>
    </div>
  </div>
</div>

? 关键注意事项：

• 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 居中）。

? 进阶提示：
若希望表格内容也统一右对齐时间列，可为

<tr><td class="fw-medium">Monday</td><td class="text-end">9:30 – 18:30</td></tr>