position: absolute + transform 是最稳妥的垂直居中方案，尤其适合遮罩层这种脱离文档流、需覆盖全屏的场景；flex 因依赖父容器有效高度，在 height 未显式约束时易失效；top: 50% + left: 50% + transform: translate(-50%, -50%) 必须同时使用，缺一不可。
position: absolute + transform 是最稳妥的垂直居中方案，尤其适合遮罩层这种脱离文档流、需覆盖全屏的场景。用 flex 会受父容器高度计算影响，容易在动态加载时失效。
为什么不能直接用 flex 居中遮罩层里的动画？
遮罩层通常设为 position: fixed 或 position: absolute，其父容器（比如 <body>）没有显式高度约束，height: 100vh 在某些移动端或滚动后页面中可能不准；而 display: flex 依赖父容器有效高度才能触发 align-items: center，一旦父高为 auto 或未撑开，子元素就贴顶——这不是 bug，是 flex 的正常行为。
top: 50% + left: 50% + transform: translate(-50%, -50%) 必须配齐
这三者缺一不可，否则会偏移或错位：
-
top: 50%和left: 50%把元素左上角定位到视口中心 -
transform: translate(-50%, -50%)把元素自身宽高的 50% 向回拉，实现真居中 - 漏掉
transform就等于只把图标左上角钉在中心点，看起来严重偏右下 - 别写成
translateX(-50%) translateY(-50%)—— 虽然等效，但多一个括号易出错，且部分旧版 Android WebView 不识别分拆写法
遮罩层容器本身必须有定位上下文
如果遮罩层是 <div id="loading">，它得是 position: fixed 或 position: absolute，否则 top/left 不生效。常见错误：
- 忘记给遮罩层设
position，只写了top: 50%—— 完全无效 - 遮罩层父元素意外加了
transform或perspective，会创建新的定位上下文，导致top: 50%相对父容器而非视口 - 用
z-index但没配合position——z-index对static元素无效
动画元素尺寸不确定时怎么避免闪动？
比如用 SVG 或动态插入的 <div>，初始无宽高，transform 仍能居中，但若内部内容异步加载（如字体图标、远程 SVG），可能出现短暂偏移。应对方式：
立即学习“前端免费学习笔记（深入）”；
- 给动画容器设最小尺寸：
min-width: 40px; min-height: 40px; - 用内联
style写死宽高，比 CSS 类更早生效 - 避免用
em或rem做动画尺寸单位——字体加载延迟会导致尺寸跳变 - 如果用 CSS 动画（如
@keyframes spin），确保animation属性写在内联样式或高优先级 class 中，防止被 reset.css 覆盖
position、top/left、transform 三者必须同时存在且正确作用于同一元素，少一个环节，就不是“居中”，而是“飘在某处”。 
