父容器必须设置可计算高度（如min-height: 100vh），否则align-items: center无效；需同时设置justify-content和align-items；避免误用align-content或place-items（ie11不支持）；子元素无需额外样式。
直接给父容器加 display: flex、justify-content: center 和 align-items: center，三行 CSS 就能搞定——但 90% 的失败案例，都卡在父容器没高度上。
父容器必须有可计算的高度，否则 align-items: center 形同虚设
align-items 依赖交叉轴（默认是垂直方向）的尺寸来对齐。如果父容器 height: auto 且内部没内容撑开它，浏览器算不出“居中基准”，视觉上就像没生效。
- 常见错误：只写
display: flex; justify-content: center; align-items: center;，却忘了设height或min-height - 推荐写法：
min-height: 100vh（全屏高），或height: 400px等固定值 - 若父容器是
，记得链路清空：html, body { height: 100%; margin: 0; } - 移动端 Safari 的
100vh在地址栏收起/展开时会跳变，可用min-height: -webkit-fill-available兜底
justify-content 和 align-items 必须同时设置，缺一不可
只设 justify-content: center —— 水平居中，但垂直方向仍按默认 flex-start 贴顶；只设 align-items: center —— 垂直方向可能“看起来”居中（靠运气撑高），但水平方向完全不控制。
- 两者作用轴不同：
justify-content管主轴（默认水平），align-items管交叉轴（默认垂直） - 不要误用
align-content: center：它只对多行 Flex 容器（flex-wrap: wrap且实际换行）有效，单行场景下完全没反应 - 想偷懒写
place-items: center？可以，但 IE11 不支持，Chrome 84+/Firefox 70+/Safari 14.1+ 才可用
子元素本身不需要任何额外样式
Flex 居中由父容器控制，子元素保持“自然状态”最稳妥。
- 别给子元素加
margin: auto：在 Flex 子项上它也能居中，但行为边界模糊，嵌套时容易冲突 - 别设
flex: 1或width/height: 100%：除非业务需要拉伸，否则纯属干扰 - 内联元素（如裸文本）可能因基线对齐产生视觉偏移，建议包一层
<div> 或设 <code>display: inline-block - 绝对定位子元素（
position: absolute）已脱离文档流，Flex 居中对其完全无效
真正容易被忽略的点，不是属性名记不牢，而是父容器高度是否真实存在——打开开发者工具，盯着 computed tab 里的 height 值看一眼，比反复调样式更管用。
