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+ 提供了语义清晰、开箱即用的垂直对齐工具类，但必须作用于 或 元素本身：

• align-top：顶部对齐
• align-middle：居中（注意：这是浏览器默认值，但显式声明可覆盖插件或自定义 CSS 的干扰）
• align-bottom：底部对齐
• align-baseline：按文本基线对齐（适合图标+文字混排）

错误写法（无效）：
内容
原因：vertical-align 对 无作用，只对单元格级元素生效。

正确写法：
内容
表头

整行统一居中时别硬加一堆 align-middle

如果一整行所有单元格都要居中，逐个加类不仅冗余，还容易漏掉。Bootstrap 5 支持在 上直接启用 Flex 布局：

• 给 加 d-flex align-items-center
• 前提是该 的 display 被覆盖为 flex（d-flex 就是干这事的）
• 注意：此时 内容需是块级或内联块，否则 align-items-center 对纯文本无效；常见做法是套一层

  示例：
  

  文本

  

  VPS Bootstrap

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

  下载

  为什么加了 align-middle 还不居中？常见干扰项

  对齐失效极少是因为类没加载，更多是被其他样式或结构破坏了渲染流：

  • 用了 bootstrap-table 插件却没关自动高度：data-height 或 height 配置会让 被设固定高，压制 vertical-align
  • 内嵌套了
    ，而该 div 有 padding、margin 或 display: flex，把视觉基准拉偏了
  • 父级 或自定义 wrapper 被设了 display: block 或 display: grid，导致表格语义断裂
  • 响应式下某列被 d-none 隐藏，剩余列宽度突变 + 行高重算，造成“看起来没居中”的错觉

  兼容旧版 Bootstrap（3.x 或更早）怎么办

  Bootstrap 3 默认把 设为 vertical-align: top，所以即使你没写任何类，它也不会居中。这时必须覆盖默认样式：

  • 推荐方式：在自定义 CSS 中写 .table td, .table th { vertical-align: middle !important; }
  • 避免用 !important 的替代方案：提高选择器特异性，例如 .table > tbody > tr > td { vertical-align: middle; }
  • 不要试图复用 Bootstrap 2/3 时代的 .vert 类——它未被官方维护，且易与新版冲突

  真正容易被忽略的是：Bootstrap 表格的垂直对齐不是“整体设置一次就完事”的功能，它依赖单元格层级、内部内容形态、以及是否被第三方插件劫持渲染逻辑。调试时优先打开 DevTools 查看 computed 面板里的 vertical-align 实际值和来源，比反复改 class 更快定位问题。