CSS Translateで要素を中央配置する

translate()による中央配置

CSS translateの最も一般的な用途の一つは、親要素内で水平・垂直の両方向に要素を中央配置することです。このテクニックは絶対配置と負のtranslate値を組み合わせます。

CSS

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

仕組み

1. position: absoluteとtop: 50%、left: 50%で要素の左上角を親の中央に配置します。
2. translateX(-50%)で要素自身の幅の半分だけ左に移動します。
3. translateY(-50%)で要素自身の高さの半分だけ上に移動します。

結果として、子要素の中心点が親の中心点に揃い、子要素のサイズに関係なく動作します。

MarginではなくTranslateを使う理由

margin: autoや負のマージンとは異なり、このアプローチは要素の幅や高さが不明でも機能します。Translateのパーセンテージは親ではなく要素自身に対する相対値です。

パフォーマンスの注意

Translate transformはほとんどのブラウザでGPUアクセラレーションされるため、このテクニックはスムーズで効率的です。マージンベースの中央配置で発生するレイアウト再計算を回避します。