align-items-center 对单行或多行子项均生效，作用于每行内子项在交叉轴的对齐；align-content-center 仅当容器启用换行且交叉轴有剩余空间时，才控制各行整体分布。
align-items-center 为什么只对单行子项起作用
align-items-center 控制的是“每一行内子项在交叉轴上的对齐方式”，它不关心有多少行，只管当前这行里的所有子项怎么排。比如三张高度不同的图片并排：img 高度分别是 120px、60px、90px，在 d-flex flex-wrap 容器里，只要没换行，align-items-center 就会让它们的中点对齐；一旦某张图导致换行，新生成的第二行里那几个子项也会各自按中点对齐——但两行之间依然紧贴着，没有额外间距。
常见错误现象：
- 加了
align-items-center却发现多行内容上下堆叠、没拉开距离 - 误以为它能控制“行与行之间的空隙”，结果调了半天没变化
关键点：
- 它对单行、多行都生效，但作用对象始终是“每个 flex line 内的 item”
- 不需要容器有额外高度空间，只要容器是 flex 容器（即含
d-flex）就立即起效 - 和
flex-direction强相关：默认row时，交叉轴是垂直方向，所以它是垂直居中；设成column后，它就变成水平居中
align-content-center 为什么经常“加了没反应”
align-content-center 管的是“所有 flex 行作为一个整体，在交叉轴剩余空间里的分布位置”。它完全不碰单个子项，只动“行块”。这意味着两个硬性前提缺一不可：
- 容器必须启用换行（
flex-wrap: wrap，即 Bootstrap 的flex-wrap或响应式类如flex-md-wrap） - 容器在交叉轴方向必须有**未被内容占满的剩余空间**（比如设了
min-vh-100、h-100或显式style="height: 400px"）
典型失效场景：
- 父容器高度由子项撑开（
height: auto），此时没有“剩余空间”，align-content-*全部无效 - 子项总宽度远小于容器宽，根本没触发换行，
align-content-center就像没写一样 - 用了
align-content-md-center，但断点下flex-wrap-md没加，小屏仍是单行，类不触发
示例对比（假设容器 flex-direction: row）：
<div class="d-flex flex-wrap min-vh-100 align-content-center"> <div class="bg-primary p-2">A</div> <div class="bg-secondary p-2">B</div> <div class="bg-success p-2">C</div> <div class="bg-warning p-2">D</div> </div>
若屏幕窄到四格无法并排，自动换为两行，这两行就会在容器高度内整体垂直居中；去掉 min-vh-100，效果立刻消失。
什么时候该用哪个？别混着试
判断依据非常直接：你想动的是“子项”，还是“行块”？
- 想让每张卡片里的文字和图标在各自卡片内垂直居中 → 用
align-items-center（加在卡片容器上） - 想让换行后的几组标签（如 .badge）在固定高度的卡片内整体上下居中 → 用
align-content-center（加在卡片容器上，且确保卡片有固定高度 +flex-wrap） - 想让整行 .col 在 .row 内上下居中 → 给 .row 加
align-items-center，不是align-content-center - 想让三行工具栏（顶部/中部/底部）在大容器里拉开间距 →
align-content-between，前提是这三块是同一d-flex flex-column flex-wrap容器的直接子元素
最容易被忽略的一点：二者可以共存，但目标完全不同。比如一个容器同时有 align-items-baseline 和 align-content-evenly，前者让每行内的文字按基线对齐，后者让这几行本身在容器里均匀分布——它们互不干扰，也互不叠加效果。
