justify-content: center 未实现垂直居中是因为它只控制主轴（默认水平），垂直居中需用 align-items: center 或 flex-direction: column；弹窗遮罩层应设 display: flex、justify-content: center、align-items: center 及明确高度。
justify-content: center 在弹窗列表里为什么没让内容垂直居中
因为 justify-content: center 默认只控制主轴对齐，而主轴方向由 flex-direction 决定。默认 flex-direction: row → 主轴是水平的 → justify-content 管的是**水平居中**，不是垂直。
常见错误现象：给弹窗父容器写了 display: flex 和 justify-content: center，但列表项依然顶着顶部；检查 DevTools 会发现子元素确实在水平居中了，只是垂直方向毫无变化。
- 想靠
justify-content实现垂直居中，必须先设flex-direction: column - 但更推荐的做法是：不改主轴，直接用
align-items: center（它管默认交叉轴，即垂直方向） - 弹窗场景下，几乎总是同时需要水平+垂直居中，所以单独写
justify-content: center是不完整的
弹窗列表真正生效的 Flex 垂直居中写法
标准弹窗结构通常是固定定位的遮罩层 + 居中弹窗盒子 + 内部列表（ul 或多个 li）。要让整个列表块在遮罩层中垂直居中，关键在遮罩层容器，不是列表本身。
正确配置如下：
- 遮罩层容器设
display: flex、justify-content: center、align-items: center - 遮罩层必须有明确高度，例如
height: 100vh或min-height: 100vh - 弹窗盒子（如
.modal）自身不用再设 flex 对齐，除非它内部还要再居中文字或按钮 - 如果列表项（
li）需要在弹窗内**单行垂直居中**（比如每行带图标和文字），则给ul设display: flex+align-items: center，并确保每项有高度或line-height可参考
容易被忽略的三个硬性前提
Flex 垂直居中不是“写了就灵”，它依赖三个物理条件，缺一不可：
-
display: flex必须作用在**直接父容器**上，不能隔层生效 - 父容器必须有**可计算的垂直空间**：
height、min-height、max-height三者至少其一；height: auto或未设置高度时，容器高度由内容撑开，“中间”无从定义 - 子元素不能脱离文档流干扰布局：比如弹窗盒子意外加了
position: absolute，就会跳出 flex 上下文，align-items完全失效
兼容旧版浏览器时的替代方案
如果项目仍需支持 IE11，align-items: center 在某些组合下（如子元素是 img）会有 1–2px 偏移。此时可改用更稳妥的单子项居中法：
- 遮罩层设
display: flex，不写任何justify-content或align-items - 弹窗盒子（唯一子元素）设
margin: auto - 该方案在 IE11 中表现稳定，且代码更少，但仅适用于弹窗为遮罩层**唯一直接子元素**的结构
- 注意：若遮罩层内还有其他元素（如背景蒙层 div、关闭按钮等），就不能用
margin: auto，必须回归align-items+ 显式高度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
