应纯用flex或absolute+transform实现加载动画居中，二者混用会因脱离flex流、定位参考系混乱及层叠上下文导致偏移或失效。
别混合用 flex 和 absolute 定位加载动画——这会破坏居中逻辑，引发不可预测的偏移或失效。真正可靠的做法是：要么纯 flex，要么纯 absolute + transform，二者混用等于主动引入冲突。
为什么 flex 容器里再套 position: absolute 子元素会错位
当父容器设了 display: flex，子元素默认成为 flex item，其定位由 justify-content 和 align-items 控制；此时若给子元素加 position: absolute，它就脱离了 flex 流，不再受这两个属性影响，而是按视口或最近的定位祖先重新计算位置。
- 常见现象：动画图标突然跳到左上角，或在 iOS Safari 缩放后偏移 1px
- 更隐蔽的问题：
absolute元素的top: 50%; left: 50%参照的是父容器边界，但父容器若没设height: 100vh（只写了min-height），它的实际高度可能为 0，导致绝对定位完全失效 - 如果父容器还加了
transform（比如为了硬件加速），absolute子元素的定位参考系会进一步混乱
flex 居中必须满足的三个硬性条件
缺一不可，否则哪怕代码看着“很全”，也会在某些设备上失效：
- 父容器必须设
position: fixed（或至少脱离文档流），且显式声明width: 100vw; height: 100vh—— 不能偷懒写100%，移动端 Safari 对100%解析不稳定 - 父容器必须同时有
display: flex; justify-content: center; align-items: center—— 少一个，就只能单向居中 - 子元素（即加载动画本身）不能设
position: absolute、margin: auto或任何干扰 flex 布局的样式；推荐用inline-block或保持默认block，并加flex-shrink: 0防止被压缩
什么时候可以/应该用 absolute + transform 替代 flex
仅限两种场景：需要兼容 IE10–IE11，或父容器无法控制（比如你只能往第三方组件内部 inject DOM，且无法改其样式）。
- 正确写法：
top: 50%; left: 50%; transform: translate(-50%, -50%)—— 必须带前缀：-webkit-transform: translate(-50%, -50%) - 必须给动画元素设明确宽高（如
width: 40px; height: 40px），否则translate(-50%, -50%)回拉量不确定，尤其在 SVG 或文字内容动态时容易抖动 - 禁用
margin: auto：在position: absolute下，margin: auto只对固定尺寸生效，且安卓 WebView 支持极差
最容易被忽略的 z-index 和层叠上下文陷阱
即使居中代码全对，动画也可能被盖住——根本原因不是 z-index 不够大，而是父级创建了新层叠上下文。
- 检查路径：从
body一路向上，看是否有任意一层加了transform、filter或will-change；只要有一个，子元素的z-index就只在该层内生效 - 临时验证：给加载容器加
isolation: isolate，强制它脱离父层叠上下文 - 长期解法：把加载容器直接
append到document.body，避开所有业务组件的样式污染 -
z-index: 9999足够，再大无意义；先查当前页面最高值（Ant Design 是 1000，Element Plus 是 2000），取个明显更大的即可
真正难的不是写出能动的动画，而是让这个动画在 iOS 键盘弹出、Android WebView 缩放、Safari 16.4 以下、甚至 IE11 里都稳稳钉在屏幕正中——这要求你放弃“看起来差不多就行”的直觉，严格按容器尺寸、定位锚点、层叠规则三者闭环验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
