在css中，transformY的目的是什么？

我一直在看一些CSS，发现它使用了

top

以及

transformY

。我想知道为什么在这个特定场景中使用这两种方法

下面是附加到图像元素的CSS

position: absolute;
width: 100%;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)

---

我想知道在这里使用变换的确切目的是什么？

问题是，如果使用

top:50%

顶部的边框将精确到50%

现在使用

translateY（-50%）

将元素向上移动其高度的50%

在本例中，您可以看到，仅使用

top:50%

时，上边框为50%。但是您希望元素本身垂直居中，因此需要像第二个示例中那样添加Translate

div{
背景：红色；
高度：300px；
宽度：300px；
位置：绝对位置；
最高：50%；
}

---

当您在元素上使用

绝对

位置时，您可以使用

顶部

、

右侧

、

底部

、和

左侧

CSS属性来相对于具有定义位置的最近父元素定位元素（例如

相对

）

translate

，无论是它的

translateX

、

translateY

还是仅仅是

translate

，都会将元素从其计算位置移动到自身。使用它的一个很好的例子是，如果您想将绝对定位的元素置于其父元素的中心

让我们看一个例子：

#父级{
位置：相对位置；
宽度：200px；
高度：200px；
背景：蓝色；
}
#父母#子女{
位置：绝对位置；
左：50%；
最高：50%；
}
#父母2{
位置：相对位置；
宽度：200px；
高度：200px；
背景：绿色；
}
#父母2#子女2{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}

标签
标签2

要在中心垂直对齐元素，

-translateY

的

-50%

基于元素高度，而顶部百分比基于相对父级高度。看起来它将元素高度的50%向上移动-尝试打开和关闭变换。这是否回答了您的问题？或者@MohsinSethi如果你想问特定于案例场景的问题，你也可以发布相关的HTML代码，即完整的MRE see（stackoverflow.com/help/minimal repeatable example），那么我会理解它为什么不是重复的，而只是问“transform（）的目的是什么”在这种情况下是重复的。