要真正实现容器内子元素的垂直+水平居中，必须同时设置 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 没有“可居中的空间”，看起来就像没生效。
立即学习“前端免费学习笔记（深入）”；
典型修复方式：
- 给父容器设
height: 100vh（全屏居中） - 或
min-height: 100vh（内容少时全屏，多时自适应） - 或确保父容器被其他方式撑开（比如有固定高度的兄弟元素、padding 等）
要不要加 flex-direction: column？
不需要。默认 flex-direction: row 就够用。只有当你想让子元素纵向排列（比如按钮堆叠）又想整体居中时，才需要改主轴方向；但此时 justify-content 和 align-items 的作用轴会互换——容易混淆，初学者建议保持默认，靠 align-items + justify-content 配合解决居中问题。
真正容易被忽略的是：父容器必须有可测量的高度，且两个对齐属性缺一不可。光写 justify-content: center 是不够的。
