align-items-center 必须与 d-flex 同时使用且父容器需有高度才生效；单独使用无效，因它仅在 flex 容器中起作用，且主轴方向决定其控制水平或垂直居中。
align-items-center 单独加没用，必须和 d-flex 一起用，且父容器得有高度——这是 90% 垂直不生效的根源。
为什么 align-items-center 没反应？
因为 align-items-center 只在 Flex 容器里起作用，它本身不改变 display。常见错误是只写 align-items-center，却忘了加 d-flex。
- 浏览器看到的是普通块级容器（
display: block），align-items-center被直接忽略 - 检查元素 computed styles：如果没有
display: flex，那肯定不生效 - Bootstrap 5 不会自动把容器变 flex，必须显式声明
d-flex
父容器没高度，居中就“看不见”
即使加了 d-flex align-items-center，如果父容器高度由内容撑开（比如空 div 或只有文字），子元素会贴顶显示，不是真居中。
- 全屏场景优先用
min-vh-100，比height: 100vh更稳（避开滚动条导致的高度偏差） - 固定高度可用
h-100（需父级也设高）或min-h-100（自定义类，或用style="min-height: 100vh"） - 嵌套容器中，每一层都要检查是否被
display: block !important覆盖
图片垂直居中要不要 object-position？
不需要。只要图片是 img 标签、父容器是 d-flex align-items-center，默认就垂直居中了。
-
object-position: 50% 50%是浏览器默认值，不用额外写 -
object-position只对display: inline或table-cell有效，Flex 下完全无效 - 如果想微调（比如顶部对齐），才用
object-position: center top，但此时要确保图片尺寸超出容器
多行内容或垂直堆叠时要注意主轴方向
默认 d-flex 是 flex-direction: row，align-items-center 控制的是“交叉轴”（即垂直方向）；但如果子元素要纵向排列，就得换主轴。
- 垂直堆叠 + 居中：必须加
flex-column，再配align-items-center justify-content-center - 否则
justify-content-center会让所有子元素并排居中，不是你想要的“一列居中” -
align-items-center在 column 主轴下控制的是水平居中（此时交叉轴是水平方向）
最容易被忽略的是：flex 容器的主轴方向决定哪个类管“水平”、哪个管“垂直”。改方向不加 flex-column，光调 align-items-center 会南辕北辙。
