CSS 要素を中央に配置する方法

CSS で要素を中央に配置する方法を紹介します。
子要素のみに指定する方法や、親要素のみに指定する方法など、方法がいくつかありますので順番にご紹介します。

1. 子要素に指定して親要素の中央に配置する方法
2. 親要素に指定して子要素を中央に配置する方法
3. 古典的な指定方法

子要素に指定して親要素の中央に配置する方法

次の指定は、ターゲットの子要素に指定して、親要素の中央に表示する方法です。
親要素には position: relative; を指定してください。

.child {

  position: absolute;

  inset: 0;

  place-self: center;

}

指定内容を解説します。まずは position: absolute; でターゲット要素を自由配置モードにします。
続いて inset: 0; で親要素の全方位にアンカーを投げます。
最後に place-self: center; でその全方位のちょうど真ん中にターゲットを立たせることで、中央表示を実現します。

中央以外に配置する場合

属性 place-self の値 center を変更して、中央以外に配置します。

属性 place-self 値を start で左上に。
属性 place-self 値を start center で上中央に。
属性 place-self 値を start end で右上に。
属性 place-self 値を center start で中央左に。
属性 place-self 値を center で中央に。
属性 place-self 値を center end で中央右に。
属性 place-self 値を end start で左下に。
属性 place-self 値を end center で下中央に。
属性 place-self 値を end で右下に。

中央を基準に位置をずらす方法

「中央に配置はしたいけど、位置を少しずらしたい！」って時あるよね？　ってことで、中央を基準に少し位置をずらす方法を紹介します。

.child {

  transform: translate(10%,10%);

}

中央の要素に属性 transform を追加、値 translate に任意の数値を指定、中央を基準に数値文の位置をずらします。

親要素に指定して子要素を中央に配置する方法

次の指定は、ターゲットの親要素に指定をして、子要素を中央に表示します。

.parent {

  display: flex;

  justify-content:center;

  align-items: center;

}

指定内容を解説します。まずは親要素に display: flex; でフレックスコンテナにします。
続いて justify-content: center; で主軸（横方向）をセンターに配置。
最後に align-items: center; で交差軸（縦方向）をセンターに配置することで、子要素が中央表示を実現します。
子要素が複数ある場合は、インナー要素を追加するなど工夫してください。

古典的な指定方法

古典的な指定方法を紹介します。

.child {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

この方法は古典的な指定方法です。最初に紹介した「子要素に指定して親要素の中央に配置する方法」は、この方法の発展形になります。
古典的な指定方法ですが、中央を基準に位置をずらしたい場合には今でも使えるテクニックです。

まとめ

要素を中央に配置する方法を紹介しました。