translate() vs top/left 用于定位答案

【问题标题】：translate() vs top/left for positioningtranslate() vs top/left 用于定位
【发布时间】：2017-03-03 17:27:41
【问题描述】：

据我发现，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()。怎么回事？

【问题讨论】：

标签： css css-position

【解决方案1】：

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

【讨论】：

很好的解释。谢谢！ :-) 我会尽快接受这个作为答案。