绝对定位 + transform 居中是最常用方案：父容器设 position: relative，loading 设 position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)，兼容 ie9+，不依赖宽高，需防遮挡加 pointer-events: none。
用绝对定位 + transform 实现 loading 居中（最常用）
绝大多数场景下，position: absolute 配合 top: 50% 和 left: 50%，再用 transform: translate(-50%, -50%) 回拉，是最稳妥的居中方式。它不依赖父容器是否 flex、是否已知宽高，兼容性好（IE9+），且不会影响文档流。
常见错误是只写 top: 50%; left: 50%，结果 loading 的左上角在中心，整个元素偏右下——必须加 transform 校正。
- 父容器需设
position: relative（否则absolute会相对于 body 定位） -
transform的百分比基于自身宽高，所以无需知道 loading 元素的具体尺寸 - 如果 loading 是 SVG 或纯 CSS 动画，建议额外加
pointer-events: none，避免遮挡底层交互
用 flex 布局让 loading 居中（父容器可控时推荐）
当 loading 的父容器是你能完全控制的（比如一个全屏遮罩 div#loading-overlay），直接给父容器设 display: flex 是最简洁的方案，代码少、语义清、响应式友好。
注意：flex 居中对父容器有要求——它不能是 inline 元素，也不能被其他样式（如 float 或 position: absolute）干扰布局流。
- 父容器加
display: flex; justify-content: center; align-items: center - 如果父容器高度未定义（比如内容撑开），需确保它有明确高度，例如
min-height: 100vh - 避免在父容器上同时用
flex和position: absolute，后者会让 flex 失效
用 grid 实现单行居中（现代项目可选）
如果项目已支持 IE11+ 且你倾向用 CSS Grid，display: grid 加 place-items: center 是一行解决的写法，语义和效果都接近 flex，但更“声明式”。
它的优势在于：不需要关心子元素是否 block/inline，也不用处理 margin auto 的边界情况；缺点是旧版 Safari（
- 父容器设
display: grid; place-items: center即可 - 若需兼容老版本 Safari，改用
grid-template-areas: "."; justify-items: center; align-items: center - Grid 居中对子元素的
margin不敏感，比 flex 更“强制”
loading 元素本身宽高不确定时的处理要点
很多 loading 是用 border 旋转做的圆圈，或 SVG circle + stroke-dasharray，它们往往没显式设 width/height，容易导致居中偏移或缩放异常。
关键不是“怎么居中”，而是“居中依据什么”。浏览器始终以元素的盒模型（content box）为基准计算位置，所以哪怕你用伪元素画 loading，也要确保其生成的框有可测量的尺寸。
- 给 loading 元素设最小尺寸，例如
width: 40px; height: 40px（即使内部是 border 圈） - SVG loading 建议加
viewBox和显式width/height，否则在不同容器中渲染比例可能不一致 - 避免用
font-size: 0清除 inline 元素间隙后忘记重置 loading 内部文字大小（如有）
opacity 切换显示，或者嵌套在 modal、table、form 等语义复杂的结构里。这时候，优先保证父容器定位上下文清晰，比堆砌居中技巧更重要。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
