用 min-vh-100 + d-flex + align-items-center 可实现视口内垂直居中，但需确保父容器有明确高度上下文，否则因交叉轴无可用空间而失效；常见原因包括 html/body 未设高、中间非 flex 容器中断流、误用 height: 100vh 导致截断或 iOS 跳变。
直接用 min-vh-100 + d-flex + align-items-center 就能稳住垂直居中，但必须确保父容器有明确高度上下文，否则它只是“看起来写了，实际没效果”。
为什么 align-items-center 有时完全不生效？
Flex 的垂直居中依赖父容器在交叉轴（垂直方向）上有可分配的空间。常见失效原因：
-
body或html没设高度，height: 100%会因祖先未定义高度而计算为0 - 只加了
align-items-center，却漏掉min-vh-100或等效高度声明 - 中间嵌套了一层没设
display: flex的普通<div>，Flex 流在此中断 <li>用了 <code>height: 100vh：内容超长时截断，且 iOS Safari 地址栏缩放会导致vh跳变 - 大屏（≥768px）要居中：用
container+col-md-6 col-lg-4 mx-auto，靠container的max-width和列的自动 margin 实现居中 - 小屏（xs）要占满：必须换
container-fluid，否则container的左右padding会让表单“缩进” - 别混用：给
container-fluid加mx-auto没意义，它没有max-width，列不会自动居中 - 小屏防贴边：加
px-3（不是px-0），避免文字顶到屏幕边缘 -
input内文字不垂直居中？别碰vertical-align（对块级 Flex 子项无效），统一设height和line-height，比如都为48px - 按钮含图标+文字？按钮自己得是 Flex 容器：
class="btn d-flex align-items-center justify-content-center" - 输入框聚焦边框颜色不对？确认用了
form-control，且没被自定义 CSS 覆盖border-color的 :focus 状态 - 密码切换按钮错位？别用
position: absolute直接塞进input父容器，改用input-group+input-group-text
✅ 正确写法：<div class="min-vh-100 d-flex align-items-center"> —— <code>min-vh-100 是 Bootstrap 5 推荐的兜底方案。
container 和 container-fluid 怎么选？
关键不在“哪个更高级”，而在“谁控制宽度与留白”：
立即学习“前端免费学习笔记（深入）”；
表单内部元素怎么对齐才不翻车？
align-items-center 只管外层登录框在视口里的位置，不管它里面 input 文字或按钮图标的对齐：
真正卡住人的从来不是“怎么写几行类名”，而是哪一层缺了高度、哪一环意外脱离了 Flex 流、以及移动端键盘弹出时 vh 是否还可靠——这些点不逐层 inspect，光复制代码只会反复看到“它应该居中，但它就是不居中”。
