translate（）vs顶部/左侧定位

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。