Flex水平垂直居中需同时设justify-content:center和align-items:center，且父容器必须有明确高度；仅justify-content:center只能水平居中，垂直方向仍贴顶；align-items:center失效常因父容器交叉轴无高度。
Flex 实现水平垂直居中，justify-content: center 和 align-items: center 必须同时写，且父容器必须有明确高度；缺一不可，否则看起来“没反应”。
为什么只写 justify-content: center 不行
它只控制主轴（默认是水平方向）对齐，子元素会水平居中，但垂直方向仍按默认值 flex-start 贴顶。常见现象：盒子水平居中了，却卡在顶部不动。
-
justify-content的作用轴由flex-direction决定：默认row时管水平，设成column就管垂直 - 它只对弹性子项生效，
position: absolute或float元素已脱离文档流，完全不受影响 - 若父容器宽度不足导致换行，
justify-content仍作用于每行内部，不改变行与行之间的分布
为什么 align-items: center 常常“失效”
根本原因是父容器交叉轴（默认是垂直方向）没有可计算的高度——比如 height: auto 且子元素没撑开它，此时 align-items 失去对齐基准，视觉上就像没起作用。
- 必须给父容器设明确高度，如
height: 100vh、min-height: 300px，或通过其他方式确保 computed height > 0 - 移动端 Safari 的
100vh在地址栏收起/展开时会跳变，可用min-height: -webkit-fill-available兜底 -
align-items对所有直接子项统一生效；想单独调整某个子项，得用align-self: center - 内联元素（如纯文本）可能因基线对齐干扰视觉效果，建议包裹一层
<div>或设display: inline-block
place-items: center 能替代吗
可以，但要注意兼容性。place-items: center 是 align-items: center 和 justify-items: center 的简写，在 Flex 容器上等效于同时设两个 center，写法更短，但仅在 Chrome 84+、Firefox 70+、Safari 14.1+ 支持。
立即学习“前端免费学习笔记（深入）”；
- 它不依赖
flex-direction，逻辑仍是“主轴居中 + 交叉轴居中” - IE 完全不支持，若需兼容 IE11，必须退回
justify-content+align-items - 不要和
margin: auto混用——在 Flex 子项上，margin: auto也能实现居中，但行为边界模糊，容易在嵌套场景下出错
最简可靠写法及易忽略点
下面这段 CSS 看似简单，但漏掉任意一项都可能导致失败：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
-
display: flex必须写在**直接父容器**上，祖父级设了没用 -
height: 100vh在绝对定位上下文中可能失效——如果父容器是position: absolute，百分比高度需要最近的定位祖先也设高度 - 子元素若自身设了
margin或transform，可能覆盖视觉居中感，调试时建议先清空这些样式 - 多行 Flex 容器（
flex-wrap: wrap）中，align-items仍控制每行内子项的垂直对齐，而align-content: center才控制“行组”的整体垂直位置——别用错对象
