Flex容器垂直居中失败的主因是未设明确高度、flex-direction非row或子项样式干扰；需设置容器高度、保持flex-direction:row、清除margin:auto等干扰样式。
在 Flex 容器中，项目无法垂直居中，通常是因为没正确设置容器的 align-items 属性，或忽略了父容器高度、flex-direction 等前提条件。
确认容器是 flex 布局且有明确高度
Flex 的垂直居中依赖于容器在交叉轴（cross axis）上有可参考的空间。如果容器本身没有设定高度（比如高度由内容撑开），align-items: center 就“无处可中”。
- 给 flex 容器设置一个具体高度，如 height: 300px 或 min-height: 100vh
- 避免父元素塌陷：确保 flex 容器的父级也提供有效高度（尤其在 body/html 层级）
- 示例：.container { display: flex; align-items: center; height: 400px; }
检查 flex-direction 是否影响了交叉轴方向
align-items 总是作用于交叉轴。默认 flex-direction: row 时，交叉轴是垂直方向（y 轴），此时 center 才能纵向居中；若设为 column，交叉轴就变成水平方向，align-items: center 反而会水平居中。
- 保持默认 flex-direction: row（无需额外写），才能让 align-items 控制垂直对齐
- 若必须用 column 布局，想纵向居中，请改用 justify-content: center（此时主轴是垂直方向）
排除 margin:auto 或其他干扰样式
子项目自身设置了 margin: auto、vertical-align、或固定 position，可能覆盖或干扰 flex 对齐行为。
立即学习“前端免费学习笔记（深入）”；
- 移除子项上的 margin: auto（它在 flex 中有特殊含义，但易引发意外）
- 确保子项没设 align-self: flex-start 等覆盖容器 align-items 的值
- 避免同时用 display: flex + position: absolute —— 绝对定位会脱离 flex 流程
基本上就这些。只要容器是 flex、有高度、方向是 row、且没被子项样式干扰，align-items: center 就能稳稳实现纵向居中。
