d-flex + align-items-center 是最直接有效的垂直居中方案，需父容器有明确高度（如 min-vh-100），且必须显式添加 d-flex；若用 grid，place-items-center 更简洁语义更清晰。
用 d-flex + align-items-center 是最直接有效的方案
只要父容器有明确高度（比如 min-vh-100 或固定 height），加这两类就能让子元素垂直居中。注意：如果父容器是 .row，它默认不是 flex 容器，必须显式加 d-flex，否则 align-items-center 不生效。
常见错误是只写 align-items-center 却漏掉 d-flex，或者父容器没设高——浏览器 DevTools 里看 computed height 才算数，不能只盯 class 名。
-
min-vh-100比h-100更可靠，后者依赖父级已设高度 - 若页面顶部有
fixed导航栏，用min-height: calc(100vh - 60px)避免内容被遮挡 - iOS Safari 旧版本对
vh计算不准，但 iOS 15+ 已无问题
Bootstrap 5.3+ 可用 place-items-center 简化 Grid 居中
当只需要“把里面的东西放中间”，不涉及 flex 的换行、排序等能力时，Grid 方案语义更清晰、代码更少。它本质是 display: grid; place-items: center 的封装。
兼容性上，IE 不支持，但 Bootstrap 官方已放弃 IE，现代项目可放心用；性能和 Flex 几乎无差别。
- 不用管
justify-content和align-items的区别，一个类搞定 - 对单个子元素效果稳定，多个子元素也自动整体居中（不像
my-auto只作用于自身） - 不能用于需要 flex 布局流的场景，比如子元素需换行或按顺序排列
my-auto 在 Bootstrap 4 中仍有实用价值
BS4 没有 align-items-center，但 my-auto 在已知高度的 flex 容器里能达成同样效果——原理是 margin-top: auto; margin-bottom: auto。
它只对加了该类的单个子元素生效；多个子元素时，其他元素会堆在顶部或底部，容易误判为“没居中”。
- 必须确保父容器是 flex（如加了
d-flex）且有明确高度 - 不适合卡片内多行内容居中，因为
my-auto不控制水平方向 - 响应式下若父容器高度塌陷，
my-auto就完全失效
别踩这些坑：vertical-align、text-center、absolute 都不是通用解
vertical-align: middle 对块级元素无效，强行用要配 display: table-cell 和固定高，语义错、维护难；text-center 只影响行内内容水平对齐，对图片、按钮等块级子元素垂直方向毫无作用；position: absolute + transform 在响应式布局中极易错位，尤其配合 Bootstrap 网格时。
- 背景图居中要用
bg-center+bg-no-repeat+bg-contain或bg-cover组合，缺一不可 - 卡片内整体居中不能只靠
text-center，得给.card-body加d-flex justify-content-center align-items-center - 所有方案都依赖容器有“可计算的高度”，空 div 或未设高父级永远无法触发垂直居中逻辑
真正卡住人的往往不是选哪个类，而是没确认父容器是否真的撑开了高度——这点在嵌套网格或响应式断点切换时最容易被忽略。
