在Bootstrap中如何垂直居中表格（table）于div容器内

本文详解如何利用 Bootstrap 的 Flexbox 工具类（如 d-flex、align-items-center、justify-content-center）精准实现表格在父级 div 中的垂直（及水平）居中，替代失效的 vertical-align: middle，并给出可直接运行的结构化代码示例。

本文详解如何利用 bootstrap 的 flexbox 工具类（如 `d-flex`、`align-items-center`、`justify-content-center`）精准实现表格在父级 div 中的垂直（及水平）居中，替代失效的 `vertical-align: middle`，并给出可直接运行的结构化代码示例。

在 Web 开发中，初学者常误以为 vertical-align: middle 可用于块级元素（如 <div> 或 <table>）的垂直居中——但该属性仅对 行内元素（inline）或 表格单元格（table-cell）生效，对普通 div 容器无效。当你希望将一个 <table> 在其父 <div> 中真正垂直居中时，推荐采用现代 CSS 布局方案：Flexbox，而 Bootstrap 4/5 已内置完善的响应式 Flex 工具类，无需额外写 CSS。

核心思路是：将承载表格的容器设为 Flex 容器，并启用主轴（垂直方向）和交叉轴（水平方向）的居中对齐：

• d-flex：启用 Flex 布局；
• align-items-center：沿 cross-axis（默认为 y 轴）垂直居中子元素；
• justify-content-center：沿 main-axis（默认为 x 轴）水平居中子元素；
• 父容器需有明确高度（如 height: 100vh 或固定值），否则 align-items-center 无法计算居中基准。

以下为优化后的完整结构示例（已适配 Angular + Bootstrap）：

<div class="col-12 d-flex">  <div class="col-6 text-center default_color" style="padding-top: 5rem;">    <div class="row">      <div class="col-12" *ngIf="!incompleteDataForTables">        <b style="color: var(--select-bg-color);">          Variación entre semanas sites        </b>        <!-- 关键：新增 flex 容器，显式设定高度 -->        <div class="col-12 d-flex align-items-center justify-content-center"             style="min-height: 300px; background-color: #f8f9fa;">          <div class="table-responsive m-2 p-1" style="width: 100%;">            <table id="data_week_comp_3500" class="table table-bordered table-sm mb-0">              <thead class="table-light">                <tr>                  <th scope="col">Semana</th>                  <th scope="col">Sitio</th>                  <th scope="col">Variación (%)</th>                </tr>              </thead>              <tbody>                <tr><td>Semana 1</td><td>Site A</td><td>+2.4</td></tr>                <tr><td>Semana 2</td><td>Site B</td><td>-1.7</td></tr>              </tbody>            </table>          </div>        </div>      </div>    </div>  </div></div>

✅ 关键改进说明：

• 移除了所有无效的 vertical-align: middle（对 div 和 table 均无作用）；
• 使用 min-height: 300px（或 height: 100vh）确保 Flex 容器具备可参考的高度基准；
• d-flex align-items-center justify-content-center 同时实现垂直+水平居中，语义清晰、兼容性好（Bootstrap 4+ 支持）；
• .table-responsive 保留滚动能力，内部 width: 100% 防止表格溢出；
• 添加 table-sm 和 mb-0 提升紧凑性与样式一致性。

⚠️ 注意事项：

• 若父容器高度依赖内容（如 height: auto），align-items-center 将失效——务必设置明确高度（min-height 更安全，兼顾内容扩展）；
• 避免嵌套多层未设高度的 flex 容器，易导致高度塌陷；
• 在 Angular 中，若表格数据异步加载，建议结合 *ngIf 或 ngClass 动态控制容器可见性，防止空白占位。

掌握这一模式后，你不仅能居中表格，还可复用至任何块级元素（卡片、表单、图表容器等），是响应式布局中的基础且高频技巧。