根本原因是父容器未设d-flex或无显式高度；justify-content-center和align-items-center仅对flex容器生效，且align-items-center需交叉轴有可计算高度。
为什么加了 justify-content-center 和 align-items-center 还是不居中
根本原因就两个：父容器没设 d-flex，或者没显式高度。这两个类只对 flex 容器生效，且 align-items-center 的“垂直居中”必须有可计算的交叉轴空间——如果父容器高度是 auto（比如纯靠内容撑开），那它实际高度就是内容高度，“中”就等于顶部。
常见错误包括：
- 只给子元素加
align-items-center，但它的父级仍是display: block - 父容器是
<div class="row">，误以为它默认是 flex 容器（其实是，但它的父级比如.container通常没高度） - 写了
min-height: 100vh，但用了height: 100vh，在 iOS Safari 或带地址栏滚动的移动端会因视口缩放导致高度计算偏差
d-flex + min-vh-100 是最稳组合
Bootstrap 5 自带 min-vh-100 工具类，等价于 min-height: 100vh，比手写 CSS 更可靠，也比 h-100（依赖祖先高度链）更鲁棒。它不强制截断内容，超长时能自然延展，同时保证至少一屏高。
实操建议：
- 直接把居中容器设为
<div class="d-flex justify-content-center align-items-center min-vh-100"> - 如果容器内还要响应式排版，里面再套一层
<div class="text-center">控制文字对齐 - 避免在子元素上额外加
mx-auto或my-auto——它们和 flex 居中逻辑冲突，尤其my-auto在非 flex 父容器里完全无效 - 用 DevTools 检查父容器的
computed height，不是看 class 名；若显示0px或auto，就得补高度
需要垂直堆叠子元素？别忘了 flex-column
默认 d-flex 是 flex-direction: row，所有子项会横着排。如果要让多个 <div> 垂直堆叠并整体居中，必须加 flex-column 显式切换主轴方向。
示例结构：
<div class="d-flex flex-column justify-content-center align-items-center min-vh-100"> <div>第一项</div> <div>第二项</div> <button class="mt-3">按钮</button> </div>
关键点：
-
justify-content-center现在控制的是垂直方向（主轴）居中 -
align-items-center控制的是水平方向（交叉轴）居中 - 子元素之间默认无间隙，如需间距，用
mb-2、mt-3等间距工具类，别依赖gap（v5.3+ 才原生支持）
第三方组件或老环境兜底：绝对定位 + transform
当父容器无法加 class（比如封装死的 UI 组件），或需兼容 Bootstrap 4 且不能改结构时，退回到 CSS 绝对定位方案：
操作步骤：
- 父容器加
position-relative - 子元素加：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 注意：该子元素会脱离文档流，不再参与父容器高度计算，可能导致下方内容上移
- 旧 Android WebView 中
transform可能有渲染抖动，慎用于高频动画场景
真正容易被忽略的是：这个方案对内容变化不敏感。比如文字从一行变三行，top: 50% 不会自动重算，而 flex 方案会——所以只要能加 d-flex，就别省那一个 class。
