使用Flexbox实现垂直居中需确保父容器设置display: flex、具有明确高度（如100vh），并正确使用align-items: center和justify-content: center，避免绝对定位或浮动干扰。
元素垂直居中不生效，通常是因为使用了错误的布局方式或属性未正确设置。Flexbox 是目前最简单、可靠的实现方式，只需正确使用 align-items 和 justify-content 即可。
确保父容器启用了 Flex 布局
要让 align-items 和 justify-content 生效，父元素必须设置为 flex 容器。
常见问题：忘记写 display: flex;示例：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100vh; /* 确保容器有高度 */
}
检查容器是否有明确高度
如果父容器高度为 0，即使设置了 align-items: center，子元素也无法垂直居中。
立即学习“前端免费学习笔记（深入）”；
建议：给父容器设置具体高度，如 100vh、固定值或继承父级高度。
- 使用 100vh 可占满视口高度
- 若父级是 body，确保 html 和 body 也设置了 height: 100%
避免与其他定位冲突
如果子元素使用了 position: absolute 或 float，会脱离文档流，导致 flex 居中失效。
解决方案：移除干扰样式，或仅对 flex 子项使用相对定位（position: relative）。处理多行内容时的居中
当需要同时居中多行文本或多个块级元素时，可以结合 flex-direction 使用。
例如竖向排列但仍居中对齐：
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
基本上就这些。只要确保 display: flex 正确启用，容器有高度，并合理使用 align-items 和 justify-content，垂直居中就不会失效。
