flex容器必须设为display: flex或inline-flex，否则align-items和justify-content无效；主轴方向决定两属性作用轴，垂直居中常用justify-content: center + align-items: center，但justify-content要求容器有明确高度。
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默认主轴是水平（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不会让所有行整体垂直居中，而是让每一行内的子元素在各自行的交叉轴上居中——这时如果想整体居中，得配合align-content。
实操建议：
- 多行场景下，
align-content: center才控制行与行之间的垂直分布 -
align-items和align-content同时存在时，前者影响行内子项，后者影响行本身位置 - 如果只有一行，
align-content无效；如果没设flex-wrap，align-content也无效
真正容易被忽略的是：Flex居中依赖容器尺寸。如果父容器高度由内容撑开，又没设min-height或height，justify-content: center就失去参照基准——这时候得靠视口单位、vh，或者把Flex上下文上移到有明确高度的祖先节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
