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。