用 display: flex + justify-content: center + align-items: center 实现居中需父容器有明确高度且不塌陷；遮罩层必须设 position: fixed 并用 inset: 0 或 width/height: 100vw/vh 占满视口；避免混用 transform 居中，禁用 overflow: hidden 在遮罩层，ios 需加 -webkit-overflow-scrolling: touch。
直接用 display: flex + justify-content: center + align-items: center 就能实现，但必须确保父容器有明确高度且不塌陷，否则居中会失效。
遮罩层必须设 position: fixed 且覆盖全视口
只写 display: flex 不够，父容器（如 .modal-overlay）若没脱离文档流，高度由内容撑开，align-items: center 就没参照空间。
-
position: fixed是前提，配合inset: 0（或top: 0; right: 0; bottom: 0; left: 0）确保占满整个视口 - 避免用
width: 100%; height: 100%，它依赖父级尺寸，在body上可能失效；width: 100vw; height: 100vh更可靠 - 移动端建议降级写法：
height: 100vh; height: 100dvh，后者在 Safari/Chrome 新版本中更稳，地址栏收放时不跳变
align-items: center 失效的常见原因
写了但没居中？大概率是交叉轴（垂直方向）没可用空间，不是 CSS 写错了。
- 父容器没设
height、min-height或max-height—— Flex 不会凭空造出“中间” -
html和body没设height: 100%，导致100%计算无依据 - 子元素（如
.modal-box）加了position: absolute，直接脱离 Flex 流，align-items对它无效 - 误以为
justify-content: center能垂直居中——它只管主轴，默认是水平方向
.modal-content 必须用 max-height 而非 height
设 height: 100% 或 height: fit-content 会破坏 Flex 居中逻辑，内容一多就溢出或滚动失效。
- 只用
max-height: calc(100vh - 120px)，预留标题、按钮等固定区域，比硬写85vh更安全 - 必须配
overflow-y: auto到.modal-content自身，别加在遮罩层上 - 禁用
overflow: hidden在遮罩层，它会屏蔽子元素的滚动请求 - iOS Safari 需补
-webkit-overflow-scrolling: touch，否则内部滚动卡顿或错位
别混用 transform: translate(-50%, -50%) 和 Flex 居中
两者逻辑冲突：Flex 已经把子元素“托”到中心，再加 transform 会导致定位偏移，尤其在图片未加载完、高度为 0 时更明显。
- 如果用了 Flex 居中，就删掉所有
top: 50%、left: 50%、transform相关声明 - 弹窗本身不需要
position: absolute，它是遮罩层的直接子元素，天然受 Flex 控制 - 嵌套多层弹窗时，每层遮罩都要独立满足上述条件，
z-index要逐级递增，且中间不能有overflow: hidden或transform干扰层叠上下文
真正麻烦的从来不是怎么写居中，而是当内容动态变化、键盘弹出、视口缩放时，100vh 基准崩了，max-height 失去依据——这时候 min-height: 100vh; height: 100% 的组合才是最轻量、最不容易翻车的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
