【CSS】`top: 50%；` 和 `transform: translateY(-50%)；`的区别和联系

top: 50%; 和 transform: translateY(-50%);的区别

在某些情况下，top: 50%; 和 transform: translateY(-50%); 可以达到类似的效果，但它们实际上具有不同的工作原理和应用场景。

1. top: 50%;：这是一个相对定位属性，用于设置元素相对于其包含块（通常是父元素）顶部的偏移量。top: 50%; 将元素的顶部边缘移动到其包含块的顶部边缘的中心位置。这通常用于垂直居中元素。

2. transform: translateY(-50%);：这是一个变换属性，用于通过平移元素的 Y 轴（垂直方向）来改变元素的位置。translateY(-50%); 将元素相对于其自身高度的一半向上移动，实现了垂直居中的效果。

虽然这两种方法在某些情况下可以产生相似的效果，但它们的工作原理和使用方式是不同的。

主要区别如下：

• top: 50%; 受到包含块的影响，所以需要确保父元素具有适当的定位（如相对定位、绝对定位）和高度，以确保居中效果。它在垂直居中元素时，对父元素的定位属性有一定要求。
• transform: translateY(-50%); 不受包含块的影响，可以直接应用于元素本身，无需考虑父元素的定位属性。它适用于垂直居中元素，并且对于绝对定位和相对定位的元素都适用。

因此，虽然在某些情况下它们可能会达到相似的效果，但在应用和工作原理上存在差异。选择使用哪种方法取决于具体的布局需求和上下文环境。

top: 50%; 和 transform: translateY(-50%);的联系

例：需求为将子元素矩形垂直居中

1. 当只有top: 50%; 时，矩形上边缘平移到整个高度的50%：

2. 当加上 transform: translateY(-50%);时，通过移动Y轴使矩形高度的中央和整个高度的中央对齐，才可以使中间的矩形实现居中对齐：