如何实现居中div绕中心轴旋转且无位置偏移？

我来帮你解决这个问题——你遇到的核心问题其实是CSS transform 属性的特性导致的：同一个元素的transform是单一声明，后设置的会完全覆盖之前的。

你通过JS给div添加的center类里，transform: translate(-50%, -50%)实现了居中，但动画关键帧里的transform: rotate(...)直接把这个平移效果覆盖了，所以才会出现位置偏移。而且你后来尝试在100%帧里写两个transform的写法是无效的，因为同一规则下同一个属性只会生效最后一个。

接下来给你两种靠谱的解决方案：

方案1：将居中平移整合到动画关键帧中 #

把居中的平移操作合并到动画的每一个关键帧里，让每一步动画都同时保持居中状态和旋转效果：

.square {
  width: 200px;
  height: 200px;
  border: 2px solid white;
  position: absolute;
  background: #227093;
  animation: rotate_x_180 2s;
}
.center {
  top: 50%;
  left: 50%;
  /* 这里可以保留translate，但动画里必须包含，否则动画启动时会被覆盖；也可以直接去掉，让动画全权负责 */
}
@keyframes rotate_x_180 {
  0% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

这样动画的每一个状态都同时包含居中平移和旋转，就不会出现位置偏移了。

方案2：用嵌套div分离定位与动画逻辑 #

更清晰易维护的方式是把居中定位和旋转动画拆到两个嵌套元素中，外层负责居中，内层负责旋转，两个元素的transform互不干扰：

<div class="center">
  <div id='my_square' class='square'></div>
</div>

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.square {
  width: 200px;
  height: 200px;
  border: 2px solid white;
  background: #227093;
  animation: rotate_x_180 2s;
}
@keyframes rotate_x_180 {
  0% { transform: rotate(180deg); }
  100% { transform: rotate(0deg); }
}

这种方式结构更清晰，后续修改定位规则或者动画效果时，彼此不会互相影响，也能保证元素始终居中并绕自身中心旋转。

另外补充一点：默认情况下元素的旋转中心就是自身的几何中心（transform-origin: 50% 50%），所以你不需要额外设置旋转原点，只要保证旋转时元素的位置没有被transform覆盖，就能正常绕中心旋转。

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