如何在 Bootstrap 中居中对齐包含表格的整个 div 内容

本文详解如何使用 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><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/853" title="Julius AI"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175679986233816.png" alt="Julius AI"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/853" title="Julius AI">Julius AI</a>
                                                                        <p>Julius AI是一款功能强大的AI数据分析工具，可以快速分析和可视化复杂数据。</p>
                                                                </div>
                                                                <a href="/ai/853" title="Julius AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
        <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>