Bootstrap 5 中垂直居中首选 d-flex + align-items-center，需父容器明确高度（如 min-vh-100），且必须为 Flex 上下文；混用 my-auto 或忽略高度/上下文将导致失效。
用 align-items-center 配合 Flex 容器最可靠
Bootstrap 5 默认启用 Flex 布局，align-items-center 是实现子元素垂直居中的首选方式，前提是父容器必须是 Flex 容器（即带 d-flex）。它作用于直接子元素，且只在单行 Flex 容器中稳定生效。
常见错误是只加 align-items-center 却忘了加 d-flex，结果样式完全不生效；或者父容器高度未明确（比如内容撑开、无 min-height），导致“居中”视觉上没效果。
- 父容器必须同时有
d-flex和align-items-center - 若需上下居中+水平居中，再加
justify-content-center - 父容器建议设
min-height: 100vh或固定高度，否则高度由内容决定，看不出居中效果 - 不推荐对
body直接加d-flex，会影响全局文档流，应包裹一层div
<div class="d-flex align-items-center justify-content-center min-vh-100"> <div>我要垂直（且水平）居中</div> </div>
用 min-vh-100 替代 height: 100vh 避免 iOS 滚动问题
iOS Safari 在地址栏收起/展开时会重算 100vh，导致页面跳动或内容被裁切。min-vh-100 是 Bootstrap 5 提供的响应式高度工具类，等价于 min-height: 100vh，能避免该问题，同时保证容器至少占满视口高度。
-
min-vh-100是安全替代方案，尤其用于登录页、引导页等首屏场景 - 不要混用
height: 100vh和min-vh-100，后者已足够 - 如果父容器本身有 padding 或 border，可能影响居中精度，建议用
box-sizing: border-box（Bootstrap 默认已设）
避免误用 my-auto 的三个典型场景
my-auto 会让元素在**其所在容器的交叉轴方向**自动分配剩余空间，但它不是万能居中工具——只有当父容器是 Flex 或 Grid 且有明确高度时才有效。很多人把它当“全局居中类”乱用，结果失效。
- 在非 Flex 容器中（如纯
div+my-auto），my-auto不起作用 - 父容器高度为
auto（即由内容撑开）时，没有“剩余空间”，my-auto无处可分 - 在表格单元格（
td）里用my-auto无效，应改用align-middle或 Flex 包裹
需要兼容 Bootstrap 4？用 d-flex + h-100 组合
Bootstrap 4 没有 min-vh-100，也没有 vh-100 等视口高度工具类，得手动补全：h-100 只设高度为 100%，但要求所有父级（包括 html、body）都显式设 height: 100%，否则链路中断。
- 必须给
html和body加style="height: 100%"，否则h-100失效 - Bootstrap 4 的
d-flex已支持align-items-center，无需额外 CSS - 如果嵌套层级深，逐级加
h-100很麻烦，不如直接升级到 Bootstrap 5
垂直居中真正难的不是写哪几个类，而是判断「谁是容器」「容器有没有高度」「它是不是 Flex 上下文」——这三个条件缺一不可，漏掉一个，就只能看到样式没反应。
