translate（）vs top / left用于定位

Question

根据我的发现，translate()似乎提供了比普通top/left更流畅的动画，但我的问题与我最近看到的CSS布局有关。作者使用以下设置在主标题图像中定位文本块：

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

他没有解释，我想知道translate()在纯布局（即无动画）方面的百分比值超过top/left的优势。我猜测这在布局的情况下并不重要，而且是作者习惯的结果。但即便如此，这同时结合了top/left和translate()。发生了什么事？

Answer 1

您发布的代码用于垂直和水平居中定位元素。此处使用translate，因为百分比是相对于元素维度的。 position: absolute的左上角和左上角的百分比值与position设置为relative, absolute or fixed的第一个父元素的尺寸相关。