为什么“转换：翻译（-50％，-50％）；” 将我的容器居中？

Question

我的页面上有一个登录框，我想将其放在页面中间，所以我使用了：

.login {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

它奏效了。但是，我不确定为什么。根据我的理解，顶部和左侧 50% 将框的左上角放在中间，所以框本身的中心还不在中心，但是在变换平移线之后，它将框放在中间， 如何？

我认为平移只会将 50% 的 x 轴和 50% 的 y 轴平移回原始位置。

Answer 1

使用时，position:absolute;您是相对于其容器定位元素。假设在您的示例中，容器是body页面的 。

并且定位的原点是元素的最左上角（如果方向设置为ltr）

使用时，transform:translate()您可以相对于自身平移元素。

尝试删除该transform:translte()属性，您会发现该元素的左上角位于body.

图片来源：https : //css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

当您重新添加transform:translate(-50%,-50%);元素时，将其中心重新定位到旧的左上角的位置，这里元素的中心将位于页面的中心。

图片来源：https : //www.youtube.com/watch?v=KJFWsggjUcE