全屏遮罩层居中必须用 position: fixed + display: flex 组合，因单独 transform 居中在滚动、软键盘弹出或动态内容下易偏移抖动，而 flex 在 fixed 容器内可稳定响应式居中且不依赖子元素尺寸。
全屏遮罩层里的 HTML 元素居中，必须用 position: fixed + display: flex 组合，缺一不可。只靠 margin: auto 或只用 transform: translate(-50%, -50%) 都会出问题。
为什么不能只用 transform: translate(-50%, -50%)
单独用 position: absolute 或 fixed 配 top: 50%; left: 50%; transform: translate(-50%, -50%) 看似能居中，但实际隐患很多：
- 滚动页面时，
fixed元素本该固定在视口中心，但若父容器有overflow: hidden或被裁剪（比如某些第三方弹窗组件），遮罩层可能被截断 - iOS Safari 下软键盘弹出或页面滚动时，
100vh动态收缩，导致top: 50%计算基准偏移，遮罩底部留白 - 如果遮罩层里嵌套了动态尺寸内容（比如加载中的文字、图标），
transform居中后仍可能因内容重排而抖动
position: fixed + display: flex 怎么写才稳
这是目前最可靠、不依赖 JS、现代浏览器全覆盖的方案。关键不是“怎么写”，而是“为什么必须这样组合”：
-
position: fixed脱离文档流，确保覆盖全屏且不随滚动偏移 -
display: flex在这个脱离流的容器内做对齐，justify-content: center和align-items: center不依赖子元素尺寸，响应式下也稳定 - 必须给
html和body设height: 100%，否则100vh在部分 iOS Safari 版本里会失效 - 遮罩层本身要设
z-index: 999（建议 ≥ 999），避免被 Tooltip、Modal 等第三方组件盖住
示例结构：
.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
pointer-events: none;
z-index: 999;
}
.overlay > * {
pointer-events: auto;
}
遮罩背景和交互控制容易踩的坑
遮罩不是摆设，得真正挡住操作，又不能让加载图标变透明或点不了：
- 背景用
background-color: rgba(0, 0, 0, 0.5)，别用opacity—— 后者会让内部所有子元素（包括图标）一起变淡，影响可读性 -
pointer-events: none必须设在遮罩层上，再显式给内部元素（如按钮、图标）设pointer-events: auto，否则点击「取消」按钮会失灵 - 如果遮罩层是通过 JS 切换
display: none/block，注意不要用visibility: hidden—— 它保留占位，且pointer-events: none在隐藏状态下仍可能干扰事件冒泡
移动端和高 DPI 屏适配要点
全屏遮罩在手机上最容易出问题的地方不在写法，而在视口行为：
- iOS Safari 对「视口」定义更严格：滚动或软键盘弹出时，
100vh可能突然缩小，导致遮罩撑不满。解决方案是不用height: 100vh，改用top: 0; bottom: 0;+fixed，它始终锚定视口四边 - Retina 屏下，
transform: scale()比直接改width/height更清晰——但仅限缩放图片等媒体内容；遮罩层自身不需要缩放 - 如果页面有
overflow: hidden的祖先容器（比如某个封装好的 Modal 组件），fixed元素会被裁剪。此时要么改用position: absolute+body为相对定位（仅限无滚动场景），要么移除该限制
真正难搞的不是代码怎么写，而是遮罩层是否真能压住所有第三方 UI、是否在键盘弹起时不闪不跳、以及用户点了「取消」之后状态有没有彻底清空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
