为什么“转换：翻译（-50％，-50％）;”将我的容器居中？ [复制]答案

【问题标题】：Why does "transform: translate(-50%,-50%);" center my container? [duplicate]为什么“转换：翻译（-50％，-50％）;”将我的容器居中？ [复制]
【发布时间】：2020-11-02 04:40:14
【问题描述】：

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

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

它奏效了。但是，我不确定为什么。根据我的理解，top and left 50% 把盒子的左上角放在中间，所以盒子本身的中心还没有在中心，但是在transform translate line之后，它把盒子放在中间，怎么做？

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

【问题讨论】：

通常原点是元素的左上角。转换将其移动到中心>我随机搜索的一个示例：medium.com/front-end-weekly/…
top: 50%; left: 50%; -- 50% 与容器的大小有关。 transform: translate(-50%,-50%); -- 50% 是相对于元素本身的大小而言的。因此，您将其向右/向下移动 50% 的容器，然后向左/向上移动 50% 的元素，从而使其居中。如果元素比设备的屏幕大，这很容易失败，这很容易在移动设备上发生。
top 和 left 由元素容器确定。 transform 属性是基于元素的，而不是由元素容器决定的。例如top 和 left 在容器内移动元素，transform 根据元素自身的宽度/高度/深度移动元素。

标签： html css twitter-bootstrap

【解决方案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

【讨论】：