Bootstrap如何设置表格单元格垂直居中-Bootstrap教程-PHP中文网

align-middle必须加在<td>或<th>上才有效，因其本质是vertical-align: middle，而vertical-align对<tr>无效；整行居中应改用<tr class="d-flex align-items-center">并确保内容为内联块级。

直接加 align-middle 到 <td> 或 <code><th> 上，别加在 <code><tr> 里——那是无效的。 <h3>为什么 <code>align-middle 加在 <tr> 上没反应 <p><code>vertical-align 是 CSS 原生属性，只对表格单元格（<td>、<code><th>）和行内元素生效，对 <code><tr> 完全无效。Bootstrap 的 <code>align-middle 类本质就是 vertical-align: middle !important，所以它也必须作用于单元格本身。

错误写法：<tr class="align-middle"><td>内容</td></tr>
正确写法：<td class="align-middle">内容</td> 或 <th class="align-middle">表头</th>
Bootstrap 3 默认设了 vertical-align: top，不显式加类就一定不居中；v4/v5 虽默认是 middle，但插件或自定义样式常覆盖它，显式声明更稳

整行都居中，还要一个个加 `align-middle` 吗

不用。Bootstrap 5+ 支持在 <tr> 上启用 Flex 布局，用 <code>d-flex align-items-center 统一控制整行：

前提：给 <tr> 加 <code>d-flex（强制 display: flex），再加 align-items-center
注意：<td> 内容需是内联块级或块级元素，纯文本不行；常见做法是包一层 <code><div class="d-inline-block"> <li>示例：<code><tr class="d-flex align-items-center"><td><div class="d-inline-block">文字</div></td></tr>
如果单元格里有图片或按钮，它们也得加 align-middle，否则基线会被拉偏

`align-middle` 失效的常见干扰项

类名没错、位置也对，但还是不居中？大概率是布局或样式被其他东西破坏了：

VPS Bootstrap

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

下载

用了 bootstrap-table 插件且开了 data-height —— 它会给 <tr> 强设固定高度，压制 <code>vertical-align
<td> 里嵌了 <code><div>，而该 <code>div 有 padding、margin 或 display: flex，导致视觉基准偏移
父级 <tbody> 或外层 wrapper 被设了 <code>display: block 或 display: grid，表格语义断裂
响应式下某列被 d-none 隐藏，剩余列宽度突变 + 行高重算，造成“看起来没居中”的错觉
设置了较大 line-height 或 height，align-middle 是按内容盒居中，不是按行框；单行文字建议用 line-height 等于高度来补救

表格整体在父容器中垂直居中怎么搞

这是另一个问题，和单元格内部对齐无关。vertical-align: middle 对 <table> 本身无效，必须用 Flex： <ul><li>把包裹 <code><table> 的父 <code><div> 设为 Flex 容器：<code>class="d-flex align-items-center justify-content-center"

该父容器**必须有明确高度**，比如 min-vh-100、h-100（需确保祖先链有高度）或固定值如 style="height: 400px;"
避免用 height: 100vh，移动端地址栏缩放会导致视口高度计算偏差；min-vh-100 更可靠
如果父容器是 Bootstrap 栅格列（如 col-8），它默认不是 flex 容器，必须显式加 d-flex