position: fixed + display: flex 是最稳妥的全屏居中加载动画方案，需设 width: 100vw、height: 100vh 并配合 justify-content 和 align-items 才能真正居中，且兼容性好、不依赖 JS。
用 position: fixed + display: flex 实现全屏居中加载动画
直接说结论：这个组合是目前最稳妥、兼容性好、代码少、且不依赖 JS 的方案。关键不在“怎么写”，而在“为什么必须加 justify-content 和 align-items，以及为什么父容器要设 height: 100vh”。
常见错误现象：div 加了 position: fixed 但没动，或者只水平居中、垂直偏上；动画一闪而过或卡在左上角；在 iOS Safari 下位置偏移。
-
position: fixed把元素脱离文档流，锚点是视口（viewport），不是父容器 —— 所以不用管它上面有没有 wrapper - 必须给父级（即 fixed 元素本身）设
width: 100vw和height: 100vh，否则flex的居中逻辑没参考范围 -
justify-content: center控制水平，align-items: center控制垂直 —— 二者缺一不可，仅靠margin: auto在 fixed + flex 下无效 - 动画元素（比如
.spinner）建议用inline-block或flex子项，避免因默认display: block导致换行或尺寸计算偏差
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.8);
z-index: 9999;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #eee;
border-top-color: #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
为什么不能只用 margin: auto 配合 position: fixed
很多人试过写 top: 0; bottom: 0; left: 0; right: 0; margin: auto;，发现只在宽高固定时才有效 —— 这是因为 margin: auto 在 fixed 定位下，只有当元素有明确的 width 和 height，且容器有可计算的“剩余空间”时，才能触发居中行为。一旦子元素是 inline 或内容自适应（比如文字、未设尺寸的 SVG），就失效。
更隐蔽的问题：某些安卓 WebView 和旧版 Chrome 会忽略这种写法，导致加载动画贴顶左对齐。
立即学习“前端免费学习笔记（深入）”；
- flex 方案不依赖子元素尺寸，哪怕里面是个
<span>Loading...</span>也能稳居中央 - 如果真要用
margin: auto，必须显式设置width和height，且不能用%或max-content这类动态值 - 移动端 Safari 对
margin: auto在 fixed 下的支持更不稳定，尤其配合transform: translate(-50%, -50%)时容易抖动
z-index 和层级遮罩的几个硬约束
加载动画必须盖住所有内容，但又不能阻断后续交互（比如 loading 结束后按钮能点）。这不只是 z-index 数字大小的问题。
常见错误现象：“点了没反应”、“表单输入框被挡住”、“下拉菜单出不来”。根本原因常是 stacking context 断裂或父容器无意中创建了新层叠上下文。
- 确保
.loading-overlay的z-index大于页面中所有业务组件的父容器（比如header、main、modal） - 避免在
.loading-overlay的任意祖先上设opacity < 1、transform、filter或will-change—— 这些都会创建新 stacking context，使z-index相对失效 - 如果页面用了
iframe，fixed 元素默认无法盖住它，需给iframe加pointer-events: none（仅 loading 期间），否则点击穿透到 iframe 内容
动画性能与 Safari 兼容细节
用 animation 做旋转比用 transform: rotate() + JS setInterval 更省资源，但 Safari 对 @keyframes 中 transform 的硬件加速支持有坑。
典型表现：iOS 上动画掉帧、初始卡顿半秒、或旋转轴心偏移。
- 务必给动画元素加
transform: translateZ(0)或will-change: transform，强制 GPU 加速（Safari 尤其需要） - 避免在
@keyframes里同时改width/height和transform，会导致 layout + paint 双重开销 - 不要用
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1)这类复杂贝塞尔曲线 —— 老版本 Safari 解析慢，可能首帧延迟 - 如果用 SVG
<circle>做环形动画，确保viewBox和width/height匹配，否则transform-origin计算错位
opacity 渐隐又得手动清定时器。这事没标准解，得看你是用 React 的 useEffect、Vue 的 v-if，还是纯 JS 切 class。 
