Bootstrap 5 中 align-items-center 无效主因是父容器未设显式高度且缺少 d-flex；应使用 d-flex align-items-center justify-content-center min-vh-100，避免 height: 100vh 截断或缩放偏差。
Bootstrap 5 默认用 Flexbox 布局，align-items-center 和 justify-content-center 能直接垂直+水平居中，但前提是父容器有明确高度且设为 display: flex —— 很多人卡在这一步，不是类没加对，而是容器本身没“撑开”。
为什么 align-items-center 没效果？
常见现象：加了 align-items-center，内容还是贴顶；检查发现父容器高度为 0 或由内容撑开（即 height: auto）。Flex 居中依赖父容器的可用交叉轴空间，没高度就没有“中”可言。
- 确保父容器有显式高度：比如
min-height: 100vh（整屏）或height: 400px - 确认父容器启用了 Flex：Bootstrap 5 中需添加
d-flex类（不能只靠align-items-center） - 避免父容器被
overflow: hidden或position: absolute干扰布局流
vh 高度 vs min-height：选哪个？
用 min-height: 100vh 更稳妥。如果内容超长，height: 100vh 会强制截断或溢出；而 min-height 保证至少一屏高，又能随内容自然扩展。
- 推荐写法：
class="d-flex align-items-center justify-content-center min-vh-100"（Bootstrap 5 内置min-vh-100） - 不推荐写死
height: 100vh，尤其在移动端可能因地址栏缩放导致计算偏差 - 若需兼容 Bootstrap 4，手动加
style="min-height: 100vh;"，因 v4 无min-vh-*工具类
不用 Flex 的老办法：position: absolute + transform
当无法改父容器为 Flex（比如嵌套在第三方组件里），可退回到 CSS 绝对定位方案，但要注意脱离文档流带来的副作用。
- 父容器需设
position: relative（Bootstrap 中可加position-relative） - 子元素加：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 此法不依赖父容器高度是否明确，但子元素不再参与父容器高度计算，可能造成下方内容上移
- 慎用于响应式卡片或网格项中——
transform在某些旧 Android WebView 中有渲染抖动
真正容易被忽略的是：居中行为是否要响应内容变化。比如一个弹窗内部文字从一行变三行，Flex 方案会自动重排，而绝对定位+固定 top/left 可能错位——这时候得用 Flex，别省那一个 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
