之所以需要transform: translate(-50%, -50%)，是因为您希望元素的中心与其父元素的中心对齐，简单地说，它可以归结为translateX(-50%) translateY(-50%)，即：

• 沿着x轴向左移动宽度的50%，然后
• 沿着y轴向上移动我身高的50

这实际上将元素的中心移动到了它原来的左上角。记住，当你在元素上设置left: 50%; top 50%时，你是在将它的左上角移动到其父元素的中心（这意味着它在视觉上根本不居中）通过将元素分别向左和向上移动其宽度和高度的一半，您可以确保它的中心现在与父元素的中心对齐。使其在视觉上水平+垂直居中。
作为概念验证，请参见下面的代码片段：将鼠标悬停在父元素上，使子元素的“ghost”通过transform: translate(-50%, -50%)重新定位自身：

body {
  margin: 0;
  padding: p;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}

<div class="parent">
  <div class="child"></div>
</div>

TL;DR版本
假设内部有一个.container和一个.item。
下面的代码相对于.container定位.item;表示.item左上角位于其容器的中心

.item {
  top: 50%;
  left: 50%;
}

而下面是.item相对于自身的宽度和高度的定位;意味着其宽度和高度的负50%。

.item {
  transform: translate(-50%, -50%);
}

如果将下面的两个代码片段结合起来，那么预期的中心就会出现。