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直接锚定视口，内容超长时也不会截断
示例：
<div class="d-flex align-items-center min-vh-100"><br> <div>我要居中的内容</div><br></div>
立即学习“前端免费学习笔记（深入）”；
表格单元格里文字不居中？别加在 <tr> 上
align-middle 是表格专用工具类，行为和原生 vertical-align: middle 一致，但极易误用：
- 必须加在
<td>或<th>上，加在<tr>上完全无效（<tr>默认是display: table-row，不识别 flex 类，也不传递对齐） - 如果
<td>里嵌了<div class="d-flex">，对齐基准就变成该 div 内部，align-middle彻底失效 - 用了
bootstrap-table插件？它常给<tr>加height，压制vertical-align计算——唯一稳妥写法仍是<td class="align-middle">内容</td>
Badge、图标、按钮内元素看起来偏下？别硬调 margin
Bootstrap 5 的 .badge 默认是 inline 元素，vertical-align: baseline 导致视觉下沉：
- 最快修复：直接覆盖样式
.badge { vertical-align: middle; } - 如果 badge 在
<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 更快。
