直接给遮罩层设display: flex+justify-content:center+align-items:center即可水平垂直居中；仅justify-content:center不行，因默认主轴为水平，垂直需align-items:center控制，且二者缺一不可。
直接给遮罩层设 display: flex + justify-content: center + align-items: center，就能同时搞定水平和垂直居中——不用 transform，不靠 margin: auto，也不写负值偏移。
为什么只写 justify-content: center 不行？
因为默认 flex-direction: row，主轴是水平的，justify-content 只管水平对齐；垂直方向得靠交叉轴控制，也就是 align-items: center。常见错误是只加了前者，结果弹窗水平居中了，但依然顶着顶部。
- 检查 DevTools 里父容器高度是否为
0px或远小于预期——那不是 Flex 写错了，是高度没给够 - 如果误设
flex-direction: column，justify-content: center才会管垂直，但容易绕晕，不推荐 - 两者必须一起写：
justify-content: center和align-items: center缺一不可
遮罩层必须用 position: fixed + 100vw/100vh
写 width: 100% 和 height: 100% 是典型翻车点：它算的是父容器尺寸，不是视口。滚动时遮罩会跟着动，或底部留白。
- 正确写法：
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh - 防横向滚动条挤压：
width: 100%; min-width: 100vw - 移动端优先用
100dvh（如height: 100vh; height: 100dvh），避免 iOS 地址栏收放导致弹窗跳动 - 确保遮罩层没有祖先元素设置了
transform、filter或overflow: hidden，否则fixed会相对该祖先定位
弹窗自身别加 margin: auto 或 position: absolute
margin: auto 在 Flex 容器里只对单个子项生效，且要求交叉轴有剩余空间；而 align-items: center 优先级更高，实际会把它忽略。加了 position: absolute 更糟——子元素直接脱离 Flex 上下文，align-items 彻底失效。
- 弹窗（如
.modal-box）直接放在遮罩层内，不设定位属性，靠父级 Flex 规则“托”到正中间 - 设
max-width: 500px或max-width: 90vw防撑满，加min-width: 0解除 flex 子项默认最小宽度锁定 - 背景用
background-color: rgba(0,0,0,0.6)，别用opacity，否则按钮和文字也会变透明
内容动态变化时，滚动和居中怎么不打架？
设了 max-height: 80vh 后内容变多，弹窗整体上浮——这是因为 align-items: center 始终以父容器可视高度为基准，而不是内容高度。
- 父容器用
min-height: 100vh（不是height: 100vh），避免 iOS 下拉刷新抖动 - 弹窗内部滚动区单独设
max-height: calc(80vh - 2rem)（预留标题/按钮高度），并加overflow-y: auto - 不要给弹窗设
height: 100%或flex: 1，这会让它试图占满父容器，破坏居中逻辑 - 异步加载或
<details></details>展开后，DOM 更新浏览器自动重排，无需 JS 强制触发
真正卡住人的从来不是 Flex 属性本身，而是三个硬性前提漏掉一个：父容器必须是直接父级、必须有可计算的垂直空间、子元素不能脱离文档流。这些条件不满足，再标准的 align-items: center 也等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
