只写 justify-content: center 无法垂直居中加载动画，必须配合 align-items: center 且父容器需有明确高度（如 height: 100dvh），因 justify-content 默认仅控制水平主轴对齐，垂直方向依赖交叉轴对齐。
只写 justify-content: center 无法让加载动画真正垂直居中——它只管水平方向，垂直方向必须靠 align-items: center，且父容器高度必须明确。
为什么 justify-content: center 单独用没反应
Flex 默认主轴是 flex-direction: row，所以 justify-content: center 只控制水平对齐；加载动画在垂直方向上仍按普通文档流排列（顶部对齐）。你看到“没动”，其实是它根本没被要求垂直移动。
- 常见现象：动画图标卡在容器顶部中央，而不是正中间
- 检查点：父容器是否漏了
align-items: center - 更隐蔽的坑：父容器用了
min-height: 100vh而非height: 100vh或height: 100dvh，导致交叉轴无确定长度，align-items失效
父容器必须满足的三个硬性条件
缺一不可，否则哪怕代码看起来“全写了”，在 iOS Safari 或缩放后仍会偏移：
-
display: flex必须显式写在父容器上（不能靠继承或 JS 动态插入后才生效） - 父容器需有明确高度：
height: 100vh或更稳的height: 100dvh（2026 年主流浏览器已支持）；min-height不行，它不提供对齐所需的基准长度 - 子元素（即加载动画）不能是
position: absolute、float或display: inline（未转为块级），否则它不参与 Flex 排列，justify-content和align-items对它完全无效
加载动画本身该用什么样式
推荐保持默认 display: block 或加 display: inline-block，并避免干扰 Flex 流的行为：
- 不要写
margin: auto—— 在 Flex 容器里它和justify-content/align-items冲突，且在老版 Safari 中表现不一致 - 不要设
width: 100%或flex: 1，这会让动画撑满容器，失去“居中对象”的语义 - 若需防压缩，加
flex-shrink: 0；若内容为空（比如纯::after动画），务必设min-width和min-height
移动端特别要注意的兼容点
iOS Safari 地址栏收放时，100vh 会跳变，造成加载动画“抖一下”。2026 年推荐方案是：
- 主力用
height: 100dvh（Chrome 120+ / Safari 17.4+ / Firefox 115+ 支持） - 兼容 iOS 15.6 及更早版本时，fallback 到 JS 动态设置：
document.documentElement.style.height = window.innerHeight + 'px' - 绝对不要混合
display: flex和子元素的position: absolute—— 这会让定位参考系混乱，动画可能飞到左上角或视口外
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
