如何使加载动画垂直居中显示并适配移动端？
2026-5-21
解决加载动画垂直居中并适配移动端的方案
别担心，这个问题很常见，我给你两种简单可靠的方法，都能完美适配移动端：
方法1：使用Flexbox布局（推荐，现代浏览器友好）
Flexbox是目前实现居中最便捷的方式，代码简洁且兼容性极佳（移动端主流浏览器都支持）。你只需要给加载动画的父容器（比如<body>）添加Flex属性，就能让子元素自动居中：
修改后的CSS代码：
/* 确保父容器占满整个视口高度 */ body { margin: 0; min-height: 100vh; /* 占满视口高度，适配移动端 */ display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } input[type=file]{ float:left; } .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 100px; height: 100px; animation: spin 2s linear infinite; /* 补全动画循环 */ } /* 补全旋转动画的关键帧 */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
为什么这个方法好用？
min-height: 100vh会让body自动适配不同设备的视口高度，包括移动端的各种屏幕尺寸- Flexbox的居中是真正的垂直水平居中，不管loader的尺寸怎么变，都能保持在中央
方法2：绝对定位 + Transform（兼容性更广）
如果需要兼容一些较老的浏览器，这种方法也很稳妥，同样适配移动端：
修改后的CSS代码：
body { margin: 0; min-height: 100vh; position: relative; /* 让绝对定位的子元素相对于body定位 */ } input[type=file]{ float:left; } .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 100px; height: 100px; animation: spin 2s linear infinite; /* 核心居中代码 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 向左向上移动自身宽高的50%，实现精准居中 */ } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
注意点：
- 这里的
transform: translate(-50%, -50%)是关键，它会让loader基于自身的中心点来偏移，而不是基于父元素的左上角，所以不管loader的大小如何，都能完美居中 - 父元素需要设置
position: relative，否则loader会相对于整个文档流定位
额外提示
- 如果你的loader是放在某个特定容器里（不是body），只需要把上述的Flex或定位属性应用到那个容器上，同时确保容器有足够的高度（比如
min-height: 100%或者固定高度） - 移动端适配方面，两种方法都不需要额外的媒体查询，因为
100vh和绝对定位都会自动适配不同屏幕尺寸
内容的提问来源于stack exchange，提问作者Daniel
