flex对齐属性仅在父容器设display: flex/inline-flex时生效；justify-content和align-items需按主/交叉轴配合使用；父容器需有高度且子元素不能脱离文档流。
父容器没设 display: flex，对齐属性根本不起作用
所有 Flex 对齐行为（比如 justify-content、align-items）只在弹性容器上生效。如果只是给子元素加 display: inline-flex 或漏写了 display: flex，那这些属性会被浏览器完全忽略——既不报错，也不渲染。
常见误写：.box { justify-content: center; } → 错，justify-content 必须写在父容器上.container { display: block; justify-content: center; } → 错，display: block 下 justify-content 无意义
- 必须先确认父容器有
display: flex或display: inline-flex - 检查开发者工具的 computed 样式，看
display是否真为flex - 避免用
!important覆盖了其他地方设的display: grid或display: block
justify-content 和 align-items 各管一轴，别指望一个搞定全部
默认 flex-direction: row 时：justify-content 控制水平（主轴），align-items 控制垂直（交叉轴）。两者必须同时设，缺一不可。
一旦改成 flex-direction: column，角色就翻转：justify-content: center 变成控制垂直居中，align-items: center 才管水平居中。
- 不要死记“
justify-content是居中”，要看它当前作用在哪根轴上 - 调试时可在开发者工具里临时切换
flex-direction，观察子元素移动方向变化 - 若只需水平居中，
align-items可不设；但要水平+垂直都居中，两个都得写
父容器高度为 0，align-items: center 就是摆设
align-items: center 依赖交叉轴（默认是垂直方向）有可计算长度。如果父容器 height: auto 且内部没内容撑开，它的实际高度就是 0 —— 浏览器没法在“零空间”里找中点，结果就是静默失效。
- 最稳妥方案：父容器加
min-height: 100vh（比height: 100vh更安全，防内容溢出） - 若父容器是
body，必须同步设html { height: 100%; }+body { height: 100%; margin: 0; } - 嵌套结构中，中间层（如 wrapper）也得检查是否漏了
min-height或被height: auto覆盖 - 移动端 Safari 的
100vh在地址栏收起/展开时会跳变，可用min-height: -webkit-fill-available兜底
子元素脱离文档流或不是直接子节点，对齐就失效
justify-content 和 align-items 只对 Flex 容器的**直接子元素**生效。以下情况都会导致对齐“失联”：
- 子元素设了
position: absolute或position: fixed→ 已脱离文档流，不再是 Flex 项目 - DOM 中存在中间 wrapper：
<div class="container"><div class="wrapper"><div class="box"></div></div></div>→.box不受.container的align-items控制 - 子元素是纯文本节点（如裸
Logout）且未包裹，可能因基线对齐产生视觉偏移；建议包一层<span></span>或设display: inline-block - 用
margin: auto混合使用：在 IE10–11 中不支持垂直方向margin: auto，且易与align-items冲突
真正卡住人的，从来不是属性名拼错，而是改完样式后，忘了打开开发者工具看一眼父容器的 computed height —— 它比反复调 align-items 有效十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
