Html 转换：转换（-50%，-50%）

当使用英雄图像或全屏图像时，我通常会看到带有以下css的文本或图像：

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

---

有人能给我解释一下这个代码实际上在做什么吗？

之所以需要

转换：translate（-50%，-50%）

是因为您希望元素的中心与其父元素的中心对齐。简单来说，它可以归结为

translateX（-50%）translateY（-50%）

，这意味着：

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

这将有效地将图元的中心移动到其原始左上角。记住，当你设置

左：50%；前50%

在元素上，您正在将其左上角移动到其父元素的中心（这意味着它在视觉上根本没有居中）。通过将图元分别向左和向上移动其宽度和高度的一半，可以确保其中心现在与父图元的中心对齐，使其在视觉上水平+垂直居中

作为概念证明，请参见下面的代码片段：将鼠标悬停在父元素上，通过

transform:translate（-50%，-50%）

，使子元素的“ghost”重新定位自身：

正文{
保证金：0；
填充物：p；
}
.家长{
背景色：#ccc；
宽度：100vw；
高度：100vh；
位置：相对位置；
}
.孩子{
背景色：rgba（0,0255,0.5）；
宽度：50px；
高度：50px；
位置：绝对位置；
最高：50%；
左：50%；
}
.孩子：以前{
背景色：rgba（255,0,0,0.5）；
位置：绝对位置；
排名：0；
左：0；
宽度：50px；
高度：50px；
内容：''；
过渡：全部。5s轻松进出；
}
body:hover.child:：before{
转换：翻译（-50%，-50%）；
}

TL；DR版本

比如说，里面有一个

.container

和一个

.item

下面的代码是相对于

.container

定位

.item

；意思是

。项目

左上角位于其容器的中心

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

而下面是定位

。项目

相对它自己的宽度和高度；意思是减去50%的宽度和高度

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

---

如果下面的两个代码组合在一起，那么预期的中心将显示出来

如果我们不知道元素的高度和宽度，这是一种使元素居中的简洁方法，而不是使用边距container@Debabrata--我知道这么多，理论上，我理解将某些东西移到左边，然后再移到前50%的概念，但是，通过变换的负向移动，你能为我把它具体化一点吗？

-50%

变换基本上意味着，简单地说，“沿着轴将这个元素向左和向上移动计算尺寸的50%”

-50%

沿x轴方向表示“将我向左移动一半计算宽度”，y轴方向也是如此。之所以需要这样做，是因为在设置

top时：50%；左：元素的50%

，将元素的左上角移动到其父元素的中心。不过，元素的中心与其父元素的中心不对齐。@Terry--谢谢Terry，这真的为我清理了它！如果你想把它作为一个实际的回答，我会把它标记为已回答/正确。@TheodoreSteiner不客气！我还用一个说明性的交互式示例更新了我的答案，这样你就可以看到“幕后”发生了什么：）这很有意义。谢谢我觉得让元素具有可以设置的锚定点更有意义，但我认为这实际上是一样的。