align-items-center 不生效是因为父容器未设置 display: flex 且高度为 auto 或 0；必须配合 d-flex 和 min-vh-100 才能可靠实现垂直居中。
align-items-center 没反应？不是类写错了，是父容器没设 display: flex，也没撑开高度。
为什么 align-items-center 不生效
这个类只在已启用 Flex 布局的容器上起作用，且必须有可参考的垂直空间。Bootstrap 5 的 .row、.container 默认仍是块级元素，不是 Flex 容器；它们也不会自动占满视口高度。
-
align-items-center必须配合d-flex才能激活——缺d-flex就等于没开开关 - 父容器高度为
auto或0时，“居中”无基准，子元素仍按文档流顶部堆叠 - 用 DevTools 查看 computed height，别只扫 class 列表——很多失效案例里 height 实际是
0px - 该类只对直接子元素生效；中间插一层没加
d-flex的<div>，链路就断了 <h3> <code>d-flex align-items-center min-vh-100是最简可靠组合这三者一起用，覆盖绝大多数单层垂直居中场景，比手写
height: 100vh更稳。-
d-flex：让父容器变成 Flex 容器，align-items-center才有作用域 -
align-items-center：控制直接子元素在交叉轴（Y 轴）居中 -
min-vh-100：等价于min-height: 100vh，内容短时撑满一屏，内容长时自然延展，不截断 - 若还需水平居中，追加
justify-content-center；只垂直居中就别加它
表格里用
align-middle的正确姿势它和原生
vertical-align: middle行为一致，但只对<td> 或 <code><th> 本身有效，不是通用居中工具。 <ul><li>加在 <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> -
.modal-dialog-centered依赖.modal是 Flex 容器且含align-items: center；如果你覆盖了.modal的display，或动态插入后没触发重排，它就静默失效 - 在
.row + .col上直接加d-flex：会让子项脱离栅格宽度计算基准，col-5可能缩成一指宽——应把居中逻辑下移到<form></form>自身，或用min-vh-100 d-flex在层实现整体垂直居中 - 子元素用了
position: absolute？它会脱离 Flex 流，align-items-center对它完全无效
模态框、内联表单这些特殊容器要小心
不是所有“看起来像容器”的元素都适合直接套 d-flex。
真正容易被忽略的是：Flex 居中不是“移动元素”，而是由父容器定义对齐规则；一旦父容器的高度或 display 缺失，整个机制就失去支点。调试时优先检查 computed height 和 display，而不是反复加类。
