fixed + flex 是目前最稳的全屏遮罩方案，因 fixed 锚定视口确保不随滚动偏移，flex 在未知尺寸、缩放或高 DPR 屏幕下仍能精准居中；需同时设置 top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 9999; background: rgba(0, 0, 0, 0.6)。
为什么 fixed + flex 是目前最稳的全屏遮罩方案
因为 position: fixed 确保遮罩始终锚定视口，不随滚动偏移；display: flex 则在宽高未知、缩放或高 DPR 屏幕下仍能精准居中子元素。单靠 top: 50%; left: 50%; transform: translate(-50%, -50%) 在 iOS Safari 缩放后容易出现 1px 偏移，而 margin: auto 在 fixed 元素上只对固定尺寸有效，且安卓 WebView 支持不稳定。
必须写的 CSS 属性和值
缺一不可，否则居中失效或遮罩漏边：
-
top: 0; left: 0; width: 100vw; height: 100vh——100%不可靠，100vw/vh才真正覆盖视口边界 -
display: flex; justify-content: center; align-items: center—— 仅justify-content或仅align-items都只能单向居中 -
z-index: 9999—— 查过当前页面最高 z-index（比如 Ant Design 是 1000，Element Plus 是 2000），取个明显更大的值 -
background: rgba(0, 0, 0, 0.6)—— 别用opacity控制整体透明度，否则加载图标也会变淡
加载动画本身怎么写才不卡
关键不是“有没有动画”，而是属性选择是否触发合成层优化：
- 用
transform: rotate()和opacity，别碰top、left、width、background-position - 旋转动画直接写
animation: spin 1s linear infinite，@keyframes spin里只写transform: rotate(360deg) - 如果加载图标是 SVG 或文字，加
will-change: transform（仅限需要高性能场景，别滥用） - 避免在
@keyframes中修改z-index或display，会中断过渡
移动端键盘弹出、页面缩放时遮罩错位怎么办
这不是写法错了，而是浏览器对 100vh 的解释差异导致的：
- iOS Safari 软键盘弹出时，
100vh会按“可用视口”重算，可能变小——改用min-height: 100dvh（Chrome 105+/Safari 16.4+ 支持），并 fallback 到min-height: 100vh - 监听
resize事件动态重设高度（仅必要时，如老版本兼容） - 给
body加overscroll-behavior: contain，防止用户在遮罩激活时还能滚动底层内容 - 遮罩容器不要设
overflow: hidden，否则在某些安卓 WebView 下会裁剪动画
最容易被忽略的是：遮罩层必须保持 pointer-events: auto，禁用交互靠的是给业务区单独加 pointer-events: none；只靠 opacity: 0 或 visibility: hidden 切换，点击事件依然会被拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
