テキストをセンター寄せするためにpossition, top, left, right, bottomを使うやり方について

Question

フロントエンドの先輩エンジニアが文字を中央寄せするものに対して

position:absolute;
top:50%;
right:50%;

のようにCSSのスタイリングをしてて違和感を覚えました。
通常、texxt-align:centerを使ってmargin,paddingで高さを整える方が効率的だしそっちの方が中央寄せをする際に理にかなったスタイリングだと思いました。
先輩エンジニアは長年コーディングしてて何か意図があってスタイリングした場合もあると考えて皆様の意見をお聞きしたいです。

Comments

[kei344]

まずその先輩に聞きましょう。

Answer 1

right:50%; と text-align:center では結果は異なりますよね。
前者は要素の右端が親要素の中心(50%)、
後者は要素全体か親要素の中心（左右余白が同じになる）
ですので。
つまり、先輩の意図は「文字を中央寄せする」ではなかったのでは。

あと、対象が前者はブロックレベル要素、後者はインライン要素という違いもあります。

Comments

[Daregada]

おそらく、先輩のCSSはあれで終わりではなく、「transform: translate(-50%, -50%);」みたいなやつが続いている。

[hatena19]

そうかもしれまんね。それなら目的は、ブロックレベル要素の中央寄せですね。
いまなら、FlexBoxを使うところでしょうね。

[21212121]

ありがとうございます。
参考になりました。