如何使加载动画（Spinner）在页面水平垂直居中且适配多设备？

这问题我之前也碰到过！固定定位的居中确实容易在移动端踩坑，尤其是直接用固定margin值的话很容易出问题。给你几个靠谱的适配方案：

方案1：使用 position: fixed + transform: translate(-50%, -50%) #

这是目前适配性最好的居中方案，不管设备尺寸怎么变，都能让加载动画精准居中。原理很简单：先让元素的左上角定位到视口中心，再通过transform把元素自身往左上移动一半的宽高，实现真正的居中效果。

修改后的CSS代码：

.spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  /* 定位到视口的中心位置 */
  top: 50%;
  left: 50%;
  /* 向左、向上移动自身宽高的50%，让元素整体居中 */
  transform: translate(-50%, -50%);
}

小提示：transform是基于元素自身尺寸计算偏移量的，所以不管你的加载动画是多大尺寸，都能完美居中，而且不会受设备缩放、父元素布局的影响，移动端适配毫无压力。

方案2：使用Flexbox布局（适合带全屏遮罩的场景） #

如果你的加载动画是配合全屏遮罩使用的，用Flexbox会更简洁，甚至不需要依赖固定定位。只需要给全屏遮罩容器设置Flex布局，就能直接让内部的加载动画居中：

HTML结构示例：

<!-- 全屏遮罩容器 -->
<div class="loading-overlay">
  <div class="spinner"></div>
</div>

对应的CSS代码：

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 可选的半透明遮罩 */
  z-index: 1030;
  /* Flex布局实现子元素居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  z-index: 1031; /* 确保加载动画在遮罩上方 */
}

这个方法的优势是代码更语义化，不需要手动计算偏移量，适合需要遮罩的全局加载场景，移动端适配同样完美。

为什么你之前的居中尝试会偏移？ #

如果之前你用的是margin: auto或者固定的margin-left/margin-top，很容易出现适配问题：

• 用margin: auto配合固定定位时，必须同时设置top: 0; bottom: 0; left: 0; right: 0才能生效，而且要求元素必须有固定宽高，灵活性很差；
• 固定的margin值是基于某个特定设备尺寸设置的，换不同尺寸的设备后，偏移量自然就不对了。

内容的提问来源于stack exchange，提问作者FeRcHo