justify-content和align-items对绝对定位loader无效，因其脱离文档流不再是flex项目；正确方案是父容器设position: relative，loader设position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)。
为什么justify-content和align-items对绝对定位Loader完全无效
因为position: absolute会让元素彻底脱离文档流，它不再是 flex 项目，也不再受父容器的主轴/交叉轴控制。哪怕父容器写了display: flex、justify-content: center、align-items: center，对这个 Loader 也毫无作用。
常见错误现象：Loader 在 Flex 容器里始终贴左上角，或随视口滚动偏移；调试时发现它的计算参考点是 body 而不是你预期的 wrapper。
- 不要给 Loader 加
margin: auto—— 缺少top/right/bottom/left: 0且宽高未固定时，它直接失效 - 不要指望靠父容器的
text-align: center居中 —— 这只对 inline 元素有效 - 避免把 Loader 放在
transform或filter的祖先元素里 —— 它们会创建新的定位上下文，干扰top: 50%的基准点
必须写的三行核心 CSS（缺一不可）
Loader 居中的最小可靠组合是：top: 50% + left: 50% + transform: translate(-50%, -50%)。但前提是父容器已提供定位锚点。
- 父容器必须显式设置
position: relative—— 即使它只是个空 div，不加这句，top/left就会上溯到body - Loader 自身必须设
position: absolute，且不能被其他规则覆盖（比如被框架样式重置为static） -
transform: translate(-50%, -50%)不可省略 —— 只写top: 50%; left: 50%是把左上角放到中心，整个 Loader 会向右下伸出一大截
示例：
.loader-wrapper { position: relative; height: 200px; }
.loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
移动端 100vh 错位怎么办
如果父容器高度用了 height: 100vh，在 iOS Safari 中地址栏收起/展开时，100vh 不会实时更新，导致 top: 50% 计算出的位置跳动甚至消失。
- 优先改用
min-height: 100dvh—— 现代浏览器（Chrome 103+、Firefox 104+、Safari 16.4+）已稳定支持，能响应地址栏变化 - 旧版兼容方案：用 JS 动态设置 CSS 变量
--vh，再让父容器用height: calc(var(--vh, 1vh) * 100) - 更稳妥的做法是避开依赖视口高度：给父容器设明确高度（如
min-height: 200px）或用flex: 1借助 flex 布局撑开
Loader 内容动态变化时容易偏移的细节
当 Loader 是一个 SVG 动画、文字加载中提示，或通过 JS 插入的 DOM，它的尺寸可能在渲染后才确定。此时 transform: translate(-50%, -50%) 依然有效，但要注意两个干扰源：
- 父容器若有
padding，不影响居中逻辑（transform基于自身盒模型，不是 padding box） - Loader 自身若有
border或outline，translate(-50%, -50%)仍按 content box 计算，无需额外补偿 - 真正要检查的是：是否在 JS 中动态修改了 Loader 的
style.position，或父容器被 JS 加了transform—— 这些会悄悄改变定位上下文
复杂点往往不在居中本身，而在谁在“悄悄移动”那个定位参考系。先用开发者工具选中 Loader，看 computed 样式里 position 和 top/left 的实际生效值，再往上逐层检查 position 和 transform 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
