css - translate() 与 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 和 translate()。怎么回事？

Answer 1

您发布的代码用于将元素垂直和水平居中放置。 translate 在这里使用，因为百分比是相对于元素尺寸的。 position: absolute 的 top 和 left 的百分比值相对于 position 设置为 relative, absolute or fixed 的第一个父元素的尺寸>.