CSS加载器内圈旋转超出父容器问题求助

安全阿岳

2026-7-1

问题解决方法

你的问题出在两个核心点：内部圆形的居中定位没生效，且动画里的transform覆盖了初始的居中设置，导致旋转时偏移到主div外面。

具体修正步骤：

修复居中语法错误：你写的transform: translate(-50% -50%)缺少逗号，正确写法是transform: translate(-50%, -50%)，同时要配合top: 50%; left: 50%;才能让内部圆在主div里精准居中。
动画中保留居中属性：CSS动画的transform会完全覆盖元素初始的transform，所以关键帧里必须把居中的translate和旋转的rotate结合起来，否则旋转时元素会回到未居中的初始状态。

修正后的完整代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 50px;
}
body,
html {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: black;
}
.maindiv {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: pink;
  position: relative;
}
.internalcircle {
  width: 3.5rem;
  height: 3.5rem;
  background-color: black;
  border-radius: 50%;
  animation: introtate 2s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes introtate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}