本文详解如何利用 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 动态控制容器可见性，防止空白占位。
掌握这一模式后，你不仅能居中表格，还可复用至任何块级元素（卡片、表单、图表容器等），是响应式布局中的基础且高频技巧。
