如何在 Bootstrap 中垂直居中表格（table）于 div 容器内-html教程-PHP中文网

本文详解如何利用 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 可用于块级元素（如

或）的垂直居中——但该属性仅对 行内元素（inline）或 表格单元格（table-cell）生效，对普通 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）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<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">
        <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 动态控制容器可见性，防止空白占位。

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