Bootstrap 5 中垂直居中需使用 align-middle 类作用于 或 元素；TableMiddle 非官方类名，无效。整行居中可用 d-flex align-items-center 于 ，但需配合内联块内容。
TableMiddle 不是 Bootstrap 官方类名，也不在任何 Bootstrap 版本（2.x / 3.x / 5.x）的文档或源码中存在。试图使用它会完全无效——浏览器根本不会识别这个类，更不会触发任何样式行为。
Bootstrap 5 中正确的垂直居中类是 align-middle
Bootstrap 5+ 提供了语义清晰、开箱即用的垂直对齐工具类，但必须作用于 <td> 或 <code><th> 元素本身：
<ul>
<li>
<code>align-top：顶部对齐
align-middle：居中（注意：这是浏览器默认值，但显式声明可覆盖插件或自定义 CSS 的干扰）align-bottom：底部对齐align-baseline：按文本基线对齐（适合图标+文字混排）错误写法（无效）：<tr class="align-middle"><td>内容</td></tr>
原因：vertical-align 对 <tr> 无作用，只对单元格级元素生效。
<p>正确写法：<br><code><td class="align-middle">内容</td><th class="align-middle">表头</th>
整行统一居中时别硬加一堆 align-middle
如果一整行所有单元格都要居中，逐个加类不仅冗余，还容易漏掉。Bootstrap 5 支持在 <tr> 上直接启用 Flex 布局：
<ul><li>给 <code><tr> 加 <code>d-flex align-items-center
<tr> 的 <code>display 被覆盖为 flex（d-flex 就是干这事的）
<td> 内容需是块级或内联块，否则 <code>align-items-center 对纯文本无效；常见做法是套一层 <div class="d-inline-block">
<p>示例：<br><code><tr class="d-flex align-items-center"><td class="flex-fill"><div class="d-inline-block">文本</div></td></tr>
为什么加了 align-middle 还不居中？常见干扰项
对齐失效极少是因为类没加载，更多是被其他样式或结构破坏了渲染流：
- 用了
bootstrap-table插件却没关自动高度：data-height或height配置会让<tr> 被设固定高，压制 <code>vertical-align <td> 内嵌套了 <code><div>，而该 <code>div有padding、margin或display: flex，把视觉基准拉偏了- 父级
<tbody> 或自定义 wrapper 被设了 <code>display: block或display: grid，导致表格语义断裂 - 响应式下某列被
d-none隐藏，剩余列宽度突变 + 行高重算，造成“看起来没居中”的错觉 - 推荐方式：在自定义 CSS 中写
.table td, .table th { vertical-align: middle !important; } - 避免用
!important的替代方案：提高选择器特异性，例如.table > tbody > tr > td { vertical-align: middle; } - 不要试图复用 Bootstrap 2/3 时代的
.vert类——它未被官方维护，且易与新版冲突
兼容旧版 Bootstrap（3.x 或更早）怎么办
Bootstrap 3 默认把 <td> 设为 <code>vertical-align: top，所以即使你没写任何类，它也不会居中。这时必须覆盖默认样式：
真正容易被忽略的是：Bootstrap 表格的垂直对齐不是“整体设置一次就完事”的功能，它依赖单元格层级、内部内容形态、以及是否被第三方插件劫持渲染逻辑。调试时优先打开 DevTools 查看 computed 面板里的 vertical-align 实际值和来源，比反复改 class 更快定位问题。
