子元素纵向堆叠必须加flex-column；bootstrap的d-flex默认flex-direction:row，仅靠对齐类不改变主轴方向，需在直接父容器加flex-column启用column方向，配合justify-content-center实现纵向居中，并确保容器有高度（如h-100）。
子元素纵向堆叠必须加 flex-column
Bootstrap 的 d-flex 默认是 flex-direction: row，所有子元素水平排列。想让它们上下堆叠，光靠 justify-content-center 或 align-items-center 没用——这些类只控制对齐，不改变主轴方向。
必须在父容器上显式加 flex-column，它等价于 flex-direction: column：
<div class="d-flex flex-column"> <div>第一项</div> <div>第二项</div> <div>第三项</div> </div>
-
flex-column必须加在直接父容器上，不能只加在子项里 - 如果父容器本身是
.row、.input-group或.btn-group，它们自带 flex 设置，会覆盖flex-column；此时需抽离结构或改用更底层的div.d-flex.flex-column - 误加
flex-column-reverse会导致顺序颠倒，但视觉上可能看不出区别，容易漏检
justify-content-center 才是纵向居中的关键
主轴变成 vertical 后，justify-content-* 控制的是子元素在**纵轴上的分布位置**，也就是上下方向。很多人卡在这儿：以为 align-items-center 能垂直居中，其实它此时管的是水平对齐（交叉轴）。
要让一列子元素整体在容器里上下居中，得靠：
<div class="d-flex flex-column justify-content-center h-100"> <div>顶部标题</div> <div>中间表单</div> <div>底部按钮</div> </div>
-
h-100或min-vh-100必须提供高度空间，否则justify-content-center没参照系，看起来没效果 -
justify-content-start→ 全部顶对齐 -
justify-content-end→ 全部底对齐 -
justify-content-between→ 首尾贴边、中间等距（适合登录页“标题+表单+忘记密码”三段式）
align-items-center 在纵向布局里控制的是水平对齐
主轴是 column，交叉轴就是 horizontal，所以 align-items-* 类此时影响的是左右方向：
-
align-items-start→ 所有子项左对齐 -
align-items-center→ 所有子项水平居中（不是上下居中！） -
align-items-end→ 所有子项右对齐 -
align-items-stretch→ 子项宽度拉满父容器（默认行为，但若子项设了width就失效）
如果某个按钮需要单独右对齐，其他保持居中，就用 align-self-end 加在那个按钮的容器上（比如 <div class="col align-self-end"><button>提交</button></div>），前提是父容器是 flex 容器且有明确高度。
常见失效原因：没高度、非直系子项、类被覆盖
加了 justify-content-center 和 flex-column 却没反应？先查这三点：
- 父容器没高度：
.row或div高度仅由内容撑开，justify-content-center就无空间可居中；加h-100、min-vh-100或固定height: 500px - 目标元素不是 flex 容器的直接子项：比如
<div class="d-flex"><div><div class="align-items-center"></div></div></div>，align-items-center加在嵌套层无效 - 类被更高优先级样式覆盖：检查 DevTools 中 computed 样式里的
flex-direction是否真是column；常见冲突来自.btn-toolbar、.input-group或自定义 CSS 里的display: flex
真正起作用的从来不是“加一堆类”，而是 d-flex + flex-column + 明确高度 + justify-content-* 这四者缺一不可。漏掉任何一个，视觉上都可能完全不对劲。
