position: absoluteした要素を中央配置するCSSの書き方

これまで、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の行を上記のコードに置き換えることで、自動的に要素の幅の半分の値を使って再配置してくれ、最終的に先程と同じ結果となる。

こちらの方が保守性が高いので積極的に使用していきたい。