CSS Flex布局垂直居中：align-items与justify-content核心

先说几个核心判断：想让子元素在 Flex 容器里垂直居中，align-items 和 justify-content 这对组合确实够用，但前提是——父容器必须先声明自己是 Flex 上下文。很多人直接往子元素上写这两个属性，结果发现纹丝不动，原因就在这儿。

Flex容器必须设为 display: flex 或 inline-flex

只想着给子元素加 align-items 或 justify-content 是不行的——父容器得先变成一个 Flex 上下文。这个坑很常见，不少人漏掉这步，样式完全不起作用。

实操上注意几点：

• 检查父容器到底设了 display: flex（块级）还是 display: inline-flex（行内），两者行为有区别。
• 别再用 display: -webkit-flex 这类过时前缀了，现代浏览器不用兼容 Safari 8 以下。
• 如果父容器用了 position: absolute 或 float 导致脱离文档流，记得确认宽高还能被 Flex 正确计算。

align-items 控制交叉轴居中，justify-content 控制主轴居中

默认主轴是水平方向（flex-direction: row），这时 justify-content 管左右对齐，align-items 管上下居中。一旦改成 flex-direction: column，这两个属性的“管事范围”就完全互换——这是最容易搞混的地方。

几个实用经验：

• 垂直居中经典组合就是 justify-content: center + align-items: center（主轴水平时）。
• 如果容器高度不确定（比如由内容撑开），align-items: center 仍然生效；但 justify-content: center 依赖容器有明确高度，否则看起来就像没居中。
• 别指望 align-items: stretch（默认值）帮你居中——它只会让子项填满交叉轴，反而破坏布局。

单个子元素垂直居中？justify-content + align-items 足够，别套多余 wrapper

见过有人为了居中一个按钮，外面还包一层 div 再设 Flex，实在太绕了。Flex 的居中能力直接作用于直接子元素，完全不需要中间层。

实操建议：

• 父容器设 display: flex、justify-content: center、align-items: center，子元素自然居中。
• 即使子元素原本是 inline 元素（比如 span），Flex 会自动把它块化，不用额外加 display: block。
• margin: auto 在 Flex 子元素上也能实现居中（尤其单个子项时），但语义不如 justify-content/align-items 清晰，不推荐作为首选方案。

align-items: center 在多行 Flex 中只对每行单独生效

当你用了 flex-wrap: wrap 且子元素换行时，align-items: center 并不会让所有行整体垂直居中，而是让每一行里的子元素在各自行的交叉轴内居中——这时候想要整个容器垂直居中，得靠 align-content。

关键点：

• 多行场景下，align-content: center 才是控制行与行之间垂直分布的属性。
• align-items 和 align-content 同时存在时，前者影响行内子项位置，后者影响行本身的位置。
• 如果只有一行，align-content 不生效；如果没设 flex-wrap，align-content 同样无效。

真正容易被忽略的是：Flex 居中依赖容器尺寸。如果父容器高度完全由内容撑开，又没设 min-height 或 height，justify-content: center 就会失去参照基准——这时候要么用视口单位（vh），要么把 Flex 上下文上移到有明确高度的祖先节点。