これまで、CSSのposition:absoluteを使って要素を中央配置しようとする場合、以下のようなコードを書いていた。
以下SCSSコード。
.parents { position: relative; .child { position: absolute; content: ''; background: #333; width: 10px; height: 10px; top: 10px; left: 50%; margin-left: -5px; } }
一度、left:50%とした後に、要素の幅を2で割った値をmargin-leftとして設定するやり方だ。
これでももちろん問題ないのだが、将来要素の幅を変えたい時に、合わせてmargin-leftの値も再計算し設定し直す必要がある。
これでは保守性に欠けるだろう。
最近知ったのだが、transformを使ったやり方が多く用いられているらしい。
transform: translateX(-50%);
margin-leftの行を上記のコードに置き換えることで、自動的に要素の幅の半分の値を使って再配置してくれ、最終的に先程と同じ結果となる。
こちらの方が保守性が高いので積極的に使用していきたい。