align-items-center 不生效是因为父容器未启用 flex 布局且缺乏高度上下文；需同时添加 d-flex 启用 flex、align-items-center 实现交叉轴居中、min-vh-100 提供足够垂直空间。

align-items-center 不生效？不是类写错了，是父容器缺 d-flex 和高度上下文。

为什么 align-items-center 没反应

这个类只在已启用 Flex 布局且有可用垂直空间的容器上起作用：

• align-items-center 本身不触发 flex，必须搭配 d-flex（或 d-inline-flex）
• Bootstrap 的 .row、.col 默认是 flex 容器，但它们不自动占满视口高度；若父容器靠内容撑高，实际高度就是内容高度，“居中”就等于贴顶
• 用浏览器 DevTools 查看父元素的 computed height，而不是只扫一眼 class 列表

最简可靠写法：d-flex align-items-center min-vh-100

三者组合覆盖绝大多数单层垂直居中场景：

• d-flex：让容器进入 flex 上下文，align-items-center 才有作用域
• align-items-center：在交叉轴（y 轴）对齐直接子元素
• min-vh-100：等价于 min-height: 100vh，比 h-100 更稳——后者依赖父级已设高，而 min-vh-100 直接锚定视口，内容超长时也不会截断

示例：

VPS Bootstrap

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

下载

<div class="d-flex align-items-center min-vh-100">
<br><div>我要居中的内容</div>
<br>
</div>

表格单元格里文字不居中？别加在 <tr> 上 <p><code>align-middle 是表格专用工具类，行为和原生 vertical-align: middle 一致，但极易误用：

• 必须加在 <td> 或 <code><th> 上，加在 <code><tr> 上完全无效（<code><tr> 默认是 <code>display: table-row，不识别 flex 类，也不传递对齐）
• 如果 <td> 里嵌了 <code><div class="d-flex">，对齐基准就变成该 div 内部，<code>align-middle 彻底失效
• 用了 bootstrap-table 插件？它常给 <tr> 加 <code>height，压制 vertical-align 计算——唯一稳妥写法仍是 <td class="align-middle">内容</td>

  Badge、图标、按钮内元素看起来偏下？别硬调 margin

  Bootstrap 5 的 .badge 默认是 inline 元素，vertical-align: baseline 导致视觉下沉：

  • 最快修复：直接覆盖样式 .badge { vertical-align: middle; }
  • 如果 badge 在 <button></button> 或 flex 容器里，vertical-align 会失效——此时应把对齐逻辑交给父容器，比如给 button 加 d-flex align-items-center
  • 混排图标时，vertical-align: text-top 或微调 vertical-align: -0.125em 可能比 middle 更贴合视觉预期

  复杂点往往不在“怎么写”，而在“谁在控制对齐”——flex 容器里 vertical-align 无效，表格里 align-items-center 无效，嵌套过深时类链路一断就全失效。盯住 DevTools 里的 computed display 和 height，比反复试 class 更快。