transform:translate(-50%,-50%)与scale()共存时居中失效问题求助

问题根源很明确：你在hover状态下设置transform:scale(0.7)时，完全覆盖了初始状态里用于居中的transform:translate(-50%, -50%)，元素失去了位移修正，自然就偏离中心了。

直接修改hover状态的transform属性，把居中位移和缩放效果合并在一起即可：

.container:hover .play__circle{
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.7);
}

这样修改后，元素会同时保留translate(-50%, -50%)的居中定位，以及scale(0.7)的缩放效果，过渡动画也能正常执行。

另外还有一种替代思路：给play__circle设置transform-origin: center center（默认值就是中心，可省略），再通过calc()计算top/left值实现居中，但第一种方法更简洁高效，是首选方案。

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