加了 justify-content-center 和 align-items-center 不居中，是因为父容器必须是 flex 容器且有明确高度（如 min-height: 100vh）；.container 和 .row 默认非 flex 容器，也无视口高度；需外层加 d-flex 和 min-vh-100 才生效。
为什么加了 justify-content-center 和 align-items-center 还不居中？
因为这两个类只对直接子元素生效，且父容器必须同时满足两个条件：是 Flex 容器、有明确高度上下文。Bootstrap 的 .container 和 .row 默认都不是 Flex 容器（.row 虽然内部用 flex，但自身仍是块级元素），也不会自动占满视口高度。
常见错误现象：
- 只加
align-items-center没反应 → 父容器没设d-flex - 加了
d-flex但内容贴顶 → 父容器缺高度，比如没写min-height: 100vh - 居中后文字换行偏左 →
justify-content-center居中的是元素整体，不是内部文本；需额外加text-center
正确做法：给最外层容器加 d-flex justify-content-center align-items-center，并确保它有高度，例如 min-height: 100vh 或 style="min-height: 100vh"。
.row 里用 justify-content-center 居中表单，为什么列宽失效？
因为 .row 是 Flex 容器，但它的子元素（即 .col-*）默认会按 flex 规则伸缩，而非严格按栅格份数分配宽度——尤其当父级还套了 d-flex 或 h-100 时，会进一步干扰栅格计算逻辑。
实操建议：
- 表单本身加
class="row justify-content-center"，不要在外层 div 上加d-flex - 输入框列用
col-5（固定 5/12 宽度），按钮列改用col-auto（不拉伸，只包内容） - 移除所有可能覆盖栅格行为的类，比如外层的
h-100、d-flex、align-items-center - 最外层用
.container或.container-fluid提供语义化宽度边界
想让多个 div 垂直堆叠并整体居中，为什么加了 d-flex 反而排成一行？
因为 d-flex 默认主轴方向是 flex-direction: row，子元素自然从左到右排列。即使加了 align-items-center 和 justify-content-center，也只是把这一行“整体”居中，不是让每个 div 上下堆叠。
关键解法：显式加 flex-column 类，把主轴转为垂直方向。
- 结构示例：
<div class="d-flex flex-column justify-content-center align-items-center min-vh-100"> <div>A</div> <div>B</div> </div> -
justify-content-center此时控制的是垂直方向（主轴）上的居中 -
align-items-center控制的是水平方向（交叉轴）上的居中 - 别漏掉
min-vh-100（等价于min-height: 100vh），否则容器高度塌陷，居中无从谈起
移动端 Safari 下 min-height: 100vh 居中错位怎么办？
因为 Safari 在地址栏收放时会动态调整 vh 单位值，导致容器高度跳变，align-items-center 的参照基准不稳定。这不是 Bootstrap 的问题，而是 CSS 视口单位在 iOS 上的固有缺陷。
可选方案：
- 改用
100dvh（dynamic viewport height）：现代浏览器支持良好，Safari 16.4+ 已支持，能响应地址栏变化 - 用
min-height: 100%配合父级height: 100vh，但需确保所有祖先元素都有高度声明，链路长易出错 - 放弃纯 CSS 居中，改用 JS 动态设置高度（仅限极端兼容需求）
- 日常开发中优先用
min-vh-100（Bootstrap 5 内置类），再配合100dvh降级处理
最容易被忽略的是：居中效果是否稳定，不只取决于类名有没有写对，更取决于高度链是否完整、是否受外部 margin 折叠或浮动残留干扰。调试时先检查 computed height，再看 flex 是否生效。
