flex居中需同时设置justify-content和align-items，仅设其一只能单向居中；父容器必须有明确高度且display:flex作用于直接父级，否则align-items无效。
Flex居中必须同时设 align-items 和 justify-content
只设其中一个，顶多实现单向居中——比如只用 justify-content: center，元素只在主轴（默认水平）居中，交叉轴（垂直）仍按默认 stretch 拉伸或 flex-start 对齐。实际页面里常看到盒子“水平居中了但贴着顶部”，就是漏了 align-items。
常见错误现象：div 内部文字或子元素水平居中、垂直却紧贴上边；父容器高度为 100vh 时子元素不居中。
-
display: flex必须作用在直接父容器上，不是祖父或更外层 - 父容器需有明确高度（如
height: 100vh或min-height），否则交叉轴无参考范围，align-items无效 - 若子元素是块级且未设宽高，
align-items: center仍有效；但若子元素是内联元素（如纯文本），需额外包裹或设display: inline-block避免基线对齐干扰
为什么 align-items: center 有时没反应？检查父容器是否被压缩
Flex 居中失效最常因为父容器“没高度”——它可能被内容撑开，也可能被 CSS 重置（如 height: auto + overflow: hidden 截断），导致交叉轴长度为 0，align-items 失去作用对象。
使用场景：全屏登录框、模态弹窗、卡片式布局中的图标+文字组合。
- 用浏览器开发者工具检查父容器的 computed height，确认是否 > 0
- 避免在父容器上同时设置
height: 100%和position: absolute却忘了给祖先设高度——百分比高度在绝对定位下依赖最近的定位祖先，不是视口 - 移动端 Safari 对
100vh有滚动缩放问题，可用min-height: -webkit-fill-available作兼容兜底
justify-content 和 align-items 的取值差异直接影响居中逻辑
两者都支持 center，但含义不同：justify-content 控制主轴（默认 row 方向），align-items 控制交叉轴（默认 column 方向）。一旦改了 flex-direction，两者的物理方向就互换。
参数差异：
- 主轴居中：
justify-content: center（水平）｜justify-content: center+flex-direction: column（垂直） - 交叉轴居中：
align-items: center（垂直）｜align-items: center+flex-direction: column（水平） - 别混淆
align-self：它只作用于单个子项，优先级高于align-items，调试时容易误以为align-items失效
性能影响极小，但滥用 align-items: stretch（默认值）配合不定高子元素，可能触发多次 layout 计算，尤其在列表滚动中。
替代方案少用，但得知道 margin: auto 在 Flex 下的特殊行为
在 Flex 容器中，给子元素设 margin: auto 也能实现完全居中，且无需关心主/交叉轴——它会自动吸收剩余空间。但这属于“隐式居中”，可读性差，调试困难，也不适用于多个子元素。
容易踩的坑：
-
margin: auto在非 Flex 环境下只对块级元素的水平方向生效，垂直方向无效；但在 Flex 下，只要容器是display: flex，它就对两个方向都起作用 - 如果子元素设置了
flex: 1或flex-grow: 1，margin: auto可能被忽略——因为弹性空间已被分配完毕 - IE11 对
margin: auto在 Flex 中的支持不稳定，生产环境建议坚持用justify-content+align-items
真正难的不是写这两行 CSS，而是判断哪个容器该设 Flex、哪个该设高度、以及当嵌套多层 Flex 时，哪一层的 align-items 正在悄悄覆盖你想要的效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
