translate（）vs上/左の位置合わせのため

Question

translate()は普通のtop/leftより滑らかなアニメーションを提供するようですが、私の質問は最近見たCSSレイアウトに関連しています。彼は説明しなかった、と私はそれがに来るときパーセンテージ値でオーバーtop/leftを持っているものを利用translate()疑問に残ってい

.hero-text-box { 
    position: absolute; 
    width: 1140px; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

：著者は、主に以下のヘッダー画像内のテキストのブロックを配置するための設定を使用しました純粋なレイアウト（つまり、アニメーションなし）。私はこれが本当にレイアウトの場合は問題ではなく、著者の習慣の結果であったと推測しています。しかしそれでも、top/leftとtranslate()の両方を組み合わせています。どうしたの？

Answer 1

投稿したコードは、要素を縦と横の中央に配置するために使用されます。パーセンテージは要素の寸法に関連しているため、translateがここで使用されます。 position: absoluteで上端と左端のパーセンテージ値は、positionがrelative, absolute or fixedに設定された最初の親要素の寸法を基準にしています。