Flex布局中align-content:center失效但align-self:center生效的问题咨询

核心是你混淆了Flex布局交叉轴相关属性的生效规则，align-content 并不等价于给所有子项批量设置align-self，二者作用场景完全不同：

• align-content 的生效有严格前提：仅当Flex容器开启换行（设置flex-wrap: wrap）且子项实际排布成多行/多列时，这个属性才会生效。它控制的是多行/多列之间的空白在交叉轴上的分配规则，对单行/单列的Flex容器没有任何作用，写了也会被浏览器直接忽略。
• align-items 才是用来统一设置所有子项默认交叉轴对齐方式的属性，效果才等价于给所有子项批量设置align-self，子项单独设置的align-self会覆盖这个默认值。
• align-self 是给单个Flex子项单独设置交叉轴对齐规则的属性，不受容器是否换行、是单行还是多行的影响，优先级高于容器上的align-items设置。

对应你的场景说明 #

你给容器设置了flex-direction: column，此时主轴为垂直方向，交叉轴为水平方向：

1. 你的代码既没有设置flex-wrap: wrap，容器内也只有一个h2元素，属于典型的单列单行Flex容器，align-content: center属于无效声明，自然不会产生居中效果。
2. 你给h2单独设置align-self: center时，属性直接作用在子项本身，不需要满足多行的生效前提，所以居中效果正常显示。
3. 如果不想给每个子项单独写对齐规则，把容器上的align-content: center换成align-items: center就能实现全子项交叉轴居中的效果。

入门Flex布局时很容易踩这个属性混淆的坑，可以记个简单的判断规则：只要你没写flex-wrap: wrap，或者页面实际渲染时容器内没有出现折行的多列/多行排布，align-content就是完全无效的，不需要写。

修正后的可运行参考代码 #

HTML结构：

<div>
    <h2> Hello </h2>
</div>

对应CSS：

div {
  display: flex;
  justify-content: center; /* 主轴（垂直方向）居中 */
  align-items: center; /* 交叉轴（水平方向）居中，替换掉原来的align-content即可 */
  flex-direction: column;
  /* 注意要给容器设置明确高度，否则容器高度由内容撑开，垂直居中效果不会体现 */
  min-height: 300px;
}

内容的提问来源于stack exchange，提问作者Nathan