translate（）与顶部/左侧进行定位

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。