要真正实现容器内子元素的垂直+水平居中，必须同时设置 display: flex、justify-content: center 和 align-items: center；父容器还需有可测量的高度（如 height 或 min-height），否则 align-items 无效。
为什么 display: flex + justify-content: center 只能水平居中？
很多人写完 display: flex 和 justify-content: center 发现元素只在水平方向居中，垂直方向没反应——因为 justify-content 控制的是主轴（main axis）上的对齐，而默认主轴是水平的（flex-direction: row）。垂直居中需要同时控制交叉轴（cross axis），得加上 align-items: center。
完整居中必须配齐哪两个属性？
要真正实现容器内子元素的垂直+水平居中，必须同时设置：
-
display: flex—— 启用弹性布局 -
justify-content: center—— 主轴居中（水平方向） -
align-items: center—— 交叉轴居中（垂直方向）
注意：这两个对齐属性作用于父容器，不是子元素。常见错误是把它们加在子元素上，无效。
父容器高度为 0 时为什么居中失效？
Flex 居中依赖父容器有明确的高度（或能撑开的高度）。如果父容器没设 height、min-height，且内部没有其他内容撑高，它的实际高度就是 0，此时 align-items: center 没有“可居中的空间”，看起来就像没生效。
立即学习“前端免费学习笔记（深入）”；
