align-content-center在Bootstrap中常无效，因其仅对多行flex容器生效，需同时满足flex-wrap: wrap、子元素实际换行≥2行及父容器有明确高度（如min-vh-100）三个条件。
align-content-center 在 Bootstrap 中为什么经常没效果
因为 align-content-center 只对**多行 flex 容器**起作用，而 Bootstrap 的 .row 默认是单行 flex（flex-wrap: wrap 但内容通常不换行），此时 align-content 完全不触发。它不是用来居中单个子项的，而是调节“多行之间的间距”的——比如三行卡片在高度富余时如何分布。
常见错误现象：align-content-center 加了但所有列还是挤在顶部；检查 computed 样式会发现 flex-lines: 1，说明根本没形成多行。
- 只在
flex-wrap: wrap且子元素实际折成 ≥2 行时才生效 - 必须配合明确高度（如
min-vh-100或h-100），否则容器高度由内容撑开，无“富余空间”可分配 -
.row默认有flex-wrap: wrap，但若子.col总宽
什么时候该用 align-content-center 而不是 align-items-center
当你有一组等高卡片（比如 .col-4 × 3），且希望它们在父容器内**按行整体垂直居中**（比如两行，中间留空），而不是让每列内部内容居中——这时才是 align-content-center 的正确场景。
对比：align-items-center 控制每列内子元素在交叉轴（垂直方向）的位置；align-content-center 控制所有 flex 行在容器内的整体垂直分布。
- 单行布局 → 用
align-items-center（更常用） - 明确多行 + 需要行间留白或居中分布 → 才考虑
align-content-center - 若想让每列里的文字/图片垂直居中，请给
.col加d-flex align-items-center，而非动.row
实战写法：让两行 .col 在固定高容器中垂直居中
必须显式创建多行、设定容器高度、并启用 wrap —— 缺一不可：
<div class="d-flex flex-column min-vh-100">
<div class="row w-100 h-100 flex-wrap align-content-center">
<div class="col-4">Card 1</div>
<div class="col-4">Card 2</div>
<div class="col-4">Card 3</div>
<div class="col-4">Card 4</div>
</div>
</div>
注意点：
-
flex-wrap已默认存在，但加显式类更可控（Bootstrap 5 没提供flex-wrap工具类，需手写或自定义） -
min-vh-100确保外层有高度基准；h-100对.row有效，但前提是父级已设高 - 别在
.row上同时加align-items-center和align-content-center，二者逻辑冲突
比 align-content-center 更实用的替代方案
绝大多数所谓“需要 align-content-center”的需求，其实真正想要的是：让内容块在视口或区域中视觉居中。这时候 d-flex align-items-center justify-content-center 组合更直接、更可靠。
- 全屏居中一个按钮？用
<div class="d-flex align-items-center justify-content-center min-vh-100"> - 让整行卡片垂直居中（不管几列）？给
.row加d-flex align-items-center h-100，再确保其父容器有高 - 要两列上下堆叠并居中？去掉
.row，改用<div class="d-flex flex-column align-items-center justify-content-center min-vh-100">
真正需要 align-content-center 的场景极少，一旦用错，第一反应不该是调参数，而是确认：这里真的有多行吗？用户是否误把“内容居中”理解成了“行分布居中”？
