父容器必须是flex容器且主轴设为vertical才能使align-items-center生效；因align-items-*始终作用于交叉轴，主轴vertical时交叉轴为horizontal，故align-items-center实现水平居中，垂直居中需用justify-content-center。
父容器必须是 flex 容器且主轴设为 vertical
直接加 align-items-center 没反应？大概率是因为父容器没启用 flex，或者主轴方向仍是默认的 horizontal（flex-direction: row）。bootstrap 的 align-items-* 类只在交叉轴上生效，而交叉轴方向由主轴决定：主轴 vertical → 交叉轴就是 horizontal（此时 align-items-* 控制的是左右对齐）；主轴 horizontal → 交叉轴才是 vertical（此时才控制上下对齐）。
所以要让子项目纵向堆叠（即主轴 vertical），必须显式加 flex-column：
<div class="d-flex flex-column align-items-center justify-content-center h-100"> <div>第一项</div> <div>第二项</div> <div>第三项</div> </div>
-
d-flex启用 Flex 布局（必不可少） -
flex-column把主轴设为 vertical，此时justify-content-*控制上下分布，align-items-*控制左右对齐 -
h-100或min-vh-100提供垂直空间，否则justify-content-center无参照系
align-items-* 在 vertical 主轴下控制的是水平对齐
很多人误以为 align-items-center 在纵向布局里还能“垂直居中”，其实不是——它始终作用于交叉轴。当主轴是 flex-column，交叉轴就是水平方向，所以：
-
align-items-start→ 所有子项左对齐 -
align-items-center→ 所有子项水平居中（视觉上“居中”其实是左右居中） -
align-items-end→ 所有子项右对齐 -
align-items-stretch→ 子项宽度拉满父容器（默认行为，但需子项未设固定 width）
如果想让纵向排列的子项“上下居中”，该用的是 justify-content-center，不是 align-items-center。
单个子项需要特殊对齐？用 align-self-* 覆盖
比如一列纵向元素中，只有最后一个按钮要右对齐，其他保持居中：
<div class="d-flex flex-column align-items-center justify-content-center h-100"> <div>标题</div> <div>说明文字</div> <button class="btn btn-primary align-self-end">操作</button> </div>
-
align-self-end直接加在目标子项上，仅影响它自己 - 它只在父容器是 Flex 且主轴明确时生效（
d-flex+flex-column或flex-row） - 注意：
align-self-stretch在子项有固定 width 时会失效；align-self-baseline对纯文本块意义不大，更适合混排图标+文字场景
高度缺失是最常被忽略的硬性前提
就算 d-flex flex-column justify-content-center 全写了，如果父容器高度是 auto（靠内容撑开），那 justify-content-center 实际上只是把子项放在“刚好包裹它们”的那个高度里居中——肉眼根本看不出变化。
- 全屏居中优先用
min-vh-100（兼容移动端、不依赖父级高度） - 嵌套场景确保所有上级容器都加了
h-100，比如.container > .row > .col > .d-flex - 避免
height: 100%，它依赖链式父级高度，一处断掉就失效 - 用浏览器 DevTools 检查 computed height，别只看 class 名
真正起效的永远是「Flex 容器 + 明确主轴方向 + 交叉轴/主轴对齐类 + 可参照的高度」这四者缺一不可。
