CSS旋转元素偏移问题：旋转circle时丢失居中位置的解决与原因

我有一个类名为square的div，内部包含一个类名为circle的div。square设置了position: absolute，circle设置了position: relative，且circle已相对于square居中。但当使用rotate旋转circle时，它会丢失居中位置，偏移到随机位置。

原始代码 #

HTML #

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

CSS #

.circle{
  width:80px;
  height:80px;
  border-radius:50%;
  border: 1px solid black;
  position:relative;
  left:50%;
  top:50%;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  cursor:pointer;
  transition:all 0.6s linear;
}

.square{
  width:120px;
  height:50px;
  border: 1px solid black;
  position: absolute;
  margin:50px;
  cursor:pointer;
  transition:all 0.6s linear;
}

.circle:hover{
  transform:rotateZ(200deg);
}

.square:hover{
  transform:rotateZ(360deg);
}

原因分析 #

• 核心问题是CSS属性覆盖：circle类初始通过transform: translate(-50%, -50%)配合left:50%、top:50%实现居中，但:hover状态下的transform: rotateZ(200deg)直接覆盖了原有transform属性，导致居中的位移效果被清除，元素回到仅靠left和top定位的状态（此时元素左上角对齐父元素中心，视觉上呈现偏移）。
• square的绝对定位和旋转不会直接导致circle偏移，只是circle自身的transform属性被覆盖才是关键。

解决方案 #

方案1：合并transform属性 #

在hover状态下同时保留位移和旋转效果，避免覆盖原有transform：

.circle:hover{
  transform: translate(-50%, -50%) rotateZ(200deg);
}

方案2：换用父元素布局实现居中 #

修改父元素square的布局，用flex直接控制子元素居中，让circle的transform仅负责旋转：

.square{
  width:120px;
  height:50px;
  border: 1px solid black;
  position: absolute;
  margin:50px;
  cursor:pointer;
  transition:all 0.6s linear;
  /* 新增flex布局实现子元素居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle{
  width:80px;
  height:80px;
  border-radius:50%;
  border: 1px solid black;
  /* 移除原有定位和transform属性 */
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all 0.6s linear;
}

.circle:hover{
  transform:rotateZ(200deg);
}

这种方式更简洁可靠，无需依赖transform实现居中，旋转时自然不会影响位置。

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