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>，链路就断了
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> 或 <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>
模态框、内联表单这些特殊容器要小心
不是所有“看起来像容器”的元素都适合直接套 d-flex。
-
.modal-dialog-centered依赖.modal是 Flex 容器且含align-items: center；如果你覆盖了.modal的display，或动态插入后没触发重排，它就静默失效 - 在
.row + .col上直接加d-flex：会让子项脱离栅格宽度计算基准，col-5可能缩成一指宽——应把居中逻辑下移到<form>自身，或用min-vh-100 d-flex在<body>层实现整体垂直居中 - 子元素用了
position: absolute？它会脱离 Flex 流，align-items-center对它完全无效
真正容易被忽略的是：Flex 居中不是“移动元素”，而是由父容器定义对齐规则；一旦父容器的高度或 display 缺失，整个机制就失去支点。调试时优先检查 computed height 和 display，而不是反复加类。
