positionで中央配置する方法｜translateとplace-selfの違いと使い分け

CSSで要素を「上下左右中央」に配置したい場面は非常に多くあります。
これまで定番だったのは position: absolute と translate を組み合わせる方法ですが、最近ではよりシンプルに書ける新しい書き方も登場しています。

この記事では、

• 従来の中央配置（translate）
• 最新の中央配置（place-self + inset）
• それぞれの違いと使い分け

を、実装コード付きで解説します。

中央配置の基本：position:absoluteの考え方

要素を上下左右中央に配置する場合、よく使われるのが position: absolute です。

これは「親要素を基準にして自由な位置に配置する」ためのプロパティで、中央配置では以下のような考え方になります。

• 親要素：position: relative
• 子要素：position: absolute
• 親を基準に位置を調整する

この基本を押さえたうえで、具体的な中央配置の方法を見ていきます。

従来の方法：translateで中央配置

コード例

・HTML

・CSS

・CodePen デモ

See the Pen [css] positionで中央配置【translate】 by mkl may (@mkl-may) on CodePen.

仕組みの解説

この方法は以下の手順で中央配置を実現しています。

1. top: 50%; left: 50%; で要素の左上を中央に移動
2. translate: -50% -50%; で要素自身の幅・高さの50%分だけ戻す

これにより、要素の中心が親要素の中央に配置されます。

別アプローチ：inset + place-selfで中央配置

※この方法は、もともとGridやFlexレイアウト向けのプロパティですが、近年のブラウザでは <code>position: absolute</code> の要素に対しても機能するケースがあります。

ただし、ブラウザのバージョンによって挙動が異なるため、使用する際は動作確認が必要です。
例として、Chromeでは比較的新しいバージョンでは動作しますが、古いバージョンでは機能しないことを確認しています。

コード例

・HTML

・CSS

・CodePen デモ

See the Pen [css] positionで中央配置【place-self + inset】 by mkl may (@mkl-may) on CodePen.

仕組みの解説

この方法は次のように動作します。

• inset: 0; → top / right / bottom / left をすべて0に指定する省略形
• place-self: center; → 自身を中央に配置

これにより、translateを使わずに中央配置が可能になります。

比較的新しい書き方のため、環境によっては注意が必要です。

使い分けのポイント

基本的な使い分けは以下の通りです。

translateを使う方法がおすすめなケース

• 古いブラウザ対応が必要
• 既存コードとの統一を重視

place-selfを使う方法がおすすめなケース

• 新規開発
• コードをシンプルにしたい
• モダンCSSを積極的に使いたい

迷った場合は「プロジェクトのブラウザ対応方針」で判断するのが安心です。

補足：FlexboxやGridで中央配置する方法

中央配置は position を使わなくても実現できます。

Flexboxの場合

Gridの場合

レイアウト目的であれば、これらの方が自然な場合も多いため、用途に応じて使い分けましょう。