最简最稳方案是display: flex + justify-content: center + align-items: center，但父容器必须有可计算高度（如height、min-height或被内容撑开），否则因高度塌陷导致居中失效；子元素无需设宽高或定位属性，IE10+支持良好。
直接给加载动画元素加 margin: 0 auto 不管用，是因为它只对块级元素水平居中有效，且不处理垂直方向；真正稳定可靠的方案得结合父容器的定位上下文和子元素自身特性来定。
父容器用 flex 布局是最省心的方案
只要父元素能改样式，display: flex + justify-content: center + align-items: center 就是首选。它天然无视子元素是 inline、block 还是 absolute 定位，也不依赖宽高是否固定。
- 必须确保父容器有明确高度（比如
height: 200px或min-height: 100vh），否则 flex 项可能“塌”成一行高度 - 如果父容器本身是
position: absolute或fixed，flex 依然生效，但要注意它的包含块是否被截断 - 避免在父容器上同时设
text-align: center，它对 flex 子项无影响，反而容易误导调试
子元素是绝对定位时，用 top/left + transform
当加载动画（比如一个 div.spinner）必须用 position: absolute（例如要盖在内容上方），就不能靠 margin 或 flex，得手动“算中心”。最安全写法是：
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这个组合的关键在于：transform 是相对于自身左上角计算的，所以 translate(-50%, -50%) 才能把中心点真正落到父容器中心。
立即学习“前端免费学习笔记（深入）”；
- 别写成
margin-top: -XXpx，因为加载动画尺寸常动态（比如字体缩放、rem 变化），像素值会失效 - 如果父容器没设
position: relative，absolute子元素会往上找最近的非static祖先，可能导致偏移出预期区域 -
transform触发硬件加速，比纯top/left更流畅，尤其在动画中
老项目不能动父容器？试试 table-cell hack
极少数场景（比如第三方组件封装死、无法加 class），只能靠子元素自己撑开并居中。这时可用 display: table-cell + vertical-align: middle + text-align: center 组合：
.loading-wrapper {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
.loading-wrapper::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
原理是利用 table-cell 的垂直对齐能力和伪元素占位触发基线对齐。
- 必须给 wrapper 显式设
width和height，否则table-cell会收缩到内容宽度 - IE8+ 支持，但若父容器是
flex或grid，table-cell会被忽略——优先级低于现代布局 - 这个方案本质是“骗”浏览器，不如 flex 直观，仅作兜底
真正容易被忽略的点是：加载动画的“正中”不是指视觉中心，而是其 boundingClientRect 的几何中心。如果动画元素内部用了 box-shadow、outline 或 border，又没设 box-sizing: border-box，实际渲染中心就会偏移。动手前先用 DevTools 的 Layout 面板确认元素的真实尺寸框。
