因为flex居中不依赖元素尺寸且不受内容动态变化影响，而transform需配合position及宽高设置，易在v-if/useState切换时闪动；flex将居中逻辑交给容器，子元素无需干预。
为什么用 display: flex 而不用 top: 50%; left: 50%; transform: translate(-50%, -50%)
因为 flex 居中不依赖元素尺寸，也不怕内容动态变化（比如文字长度不同、SVG宽高不确定），而 transform 方案一旦没设 width/height，或遇到 inline 元素，就容易错位。尤其在 Vue/React 中用 v-if 或 useState 控制显隐时，transform 定位可能在首次渲染前“闪一下”偏移。
Flex 方案更稳的关键在于：它把居中逻辑交给容器，子元素完全“躺平”，不用管自己多大、在哪。
- 必须给 fixed 容器设
width: 100vw和height: 100vh，否则justify-content和align-items没参考基准 - 不能只写
top: 0; bottom: 0; left: 0; right: 0就以为能触发 flex 居中——这四个值只是撑开位置，不是撑开尺寸 - 移动端 Safari 对
height: 100%支持不稳定，一定要用100vh，别偷懒写100%
position: fixed 下 z-index 失效的常见原因
加载动画明明写了 z-index: 9999，却还是被按钮、弹窗盖住——大概率是父级容器有 transform、filter 或 will-change，导致创建了新的层叠上下文，让子元素的 z-index 只在该上下文内生效。
检查路径通常是：body → layout wrapper → modal → loading，只要其中某一层加了 transform: translateZ(0)（哪怕只是为了开启硬件加速），就会切断层级链。
- 临时排查：给 loading 容器加
isolation: isolate，强制它脱离父层叠上下文 - 长期解法：把 loading 容器直接挂到
document.body下，避开所有业务组件的样式污染 - 别信“z-index 越大越好”——Ant Design 默认
1000，Element Plus 是2000，设9999足够，再大无意义
旋转动画为什么推荐用 transform: rotate() 而非修改 border-top-color
因为只有 transform 和 opacity 是 CSS 中真正不触发重排（layout）和重绘（paint）的属性，其余如 border-color、width、height 都会强制浏览器重新计算布局，尤其在低端安卓机上掉帧明显。
一个常见错误是这样写：
@keyframes spin {
from { border-top-color: #333; }
to { border-top-color: #666; }
}
这根本不是旋转，只是颜色切换；真要转圈，必须用 transform: rotate()。
- 动画定义里只写
transform: rotate(360deg)，别在 keyframes 里塞margin、top、left - 为兼容老设备，加前缀：
-webkit-transform: rotate(360deg) - 如果旋转元素带阴影，加
will-change: transform提前告知浏览器，但仅限高频动画场景，别全局滥用
移动端 fixed 动画错位或闪烁的根本原因
iOS Safari 在 pinch-zoom、横竖屏切换后，position: fixed 元素常卡在旧坐标不动，甚至整个遮罩层“漂移”。这不是 bug，是浏览器对视口缩放状态的缓存策略。
最轻量的修复方式不是监听 resize 事件（它在 iOS 上不触发 zoom），而是利用 orientationchange + 强制重绘：
- 给 loading 容器加一个空 class 切换，比如
loading--force-repaint，CSS 里写.loading--force-repaint { opacity: .999; } - 确保
不含user-scalable=no，否则系统会禁用部分 fixed 行为 - 避免在 body 上设
overflow: hidden——它会让 fixed 元素在滚动时被裁切，尤其在微信内置浏览器里高频复现
真正难处理的不是“怎么让它动起来”，而是“怎么让它在各种缩放、滚动、切换后还待在原地”。Flex + fixed 组合虽简单，但每个细节都卡在浏览器渲染管线的边界上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
