为何我的div无法在屏幕中心原地旋转？求解决方案

问题根源在于你给.square设置的初始transform: translate(-50%, -50%)被动画里的transform完全覆盖了。transform是复合属性，同一个元素后设置的transform会替换掉之前的，所以动画执行时，元素失去了居中定位，自然会偏移。

修复方案 #

把居中的translate和旋转的rotate合并到动画的transform里，让两者同时生效：

修改后的CSS代码：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 30px;
  color: white;
  background-color: #333;
  overflow: hidden;
}

.square {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 400px;
  background-color: gold;
  border: 3px solid black;
  animation: square 4s ease-in-out .5s infinite;
  animation-direction: alternate;
  transition: transform 2s;
}

@keyframes square {
  from {
    top: 20%;
    background-color: aquamarine;
    /* 合并translate和rotate，保持居中同时旋转 */
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    top: 80%;
    background-color: sandybrown;
    /* 合并translate和rotate，保持居中同时旋转 */
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

HTML代码不变：

<div class="square"></div>

原理说明 #

当你在动画里只写rotate时，相当于把初始的translate(-50%, -50%)给替换掉了，元素的定位变成了top:50%; left:50%（元素左上角在页面中心），旋转时自然会绕左上角偏移。把两个变换合并到同一个transform里后，translate保持元素居中，rotate在这个基础上执行，就能实现绕自身中心旋转的效果。

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