かつては、要素を上下左右中央に配置するのに、position: absolute;とtransform: translate(-50%, -50%);を使うのが一般的でした。しかし、現在ではもっとシンプルな方法があり、最短でたった2行のCSSで実現できます。

この記事では、CSS で要素を上下左右の中央に配置する方法を紹介します。

LINE着せかえ「回るお寿司」販売中！

CSS で上下左右中央に配置する方法

display: grid; を使用して上下左右中央に配置する

display: grid; とplace-items: center;を使えば、親要素にたった 2 行追加するだけで要素を上下左右中央に配置できます。

.parent {
  display: grid;
  place-items: center;
}

See the Pen css-center-vertical-horizontal 01 by YUTSUZO (@YUTSUZO) on CodePen.

これだけで、子要素が親要素の中央に配置されます。この方法だと、配置する要素の高さや幅が決まっていなくても上下左右中央に配置されるのも大きなメリットです。

ちなみに、place-itemsは省略形のプロパティで、align-itemsとjustify-itemsを一括で指定することができるプロパティです。

flex よりも grid のほうがシンプルに書ける

flex を使用した場合でもalign-itemsとjustify-contentにcenterを指定すれば、上下左右中央の配置が可能です。しかし、こちらは一括指定できるプロパティがないので、gridを使用したほうがよりシンプルな記述が可能です。

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

配置したい要素の position が absolute や fixed の場合

配置する要素の高さや幅が決まっている場合

中央に配置したい要素がabsoluteもしくはfixedで、尚且つ高さや幅が決まっている場合は、inset: 0;とmargin: auto;を使う方法があります。

.parent {
  contain: content;
}

.child {
  position: absolute; /* または fixed */
  inset: 0;
  margin: auto;
  width: 240px;
  height: 100px;
}

See the Pen css-center-vertical-horizontal 02 by YUTSUZO (@YUTSUZO) on CodePen.

insetはtop,right,bottom,leftを一括指定できるプロパティで、これを使うことでシンプルな記述が可能です。

高さや幅が決まっていない場合は、従来の translate を使用する方法も有用

配置したい要素がabsoluteもしくはfixedで、幅や高さが決まっていない場合は、従来のtransform: translate(-50%, -50%);を使う方法も有用です。

.parent {
  contain: content;
}

.child {
  position: absolute; /* または fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

See the Pen css-center-vertical-horizontal 03 by YUTSUZO (@YUTSUZO) on CodePen.

ただし、translateを使用する方法では、配置する要素の幅や高さが親要素の50%を超える場合、レイアウトが崩れることがあります。

gridを使用する方法であれば、そのようなことも発生せず、サイズが決まっていない場合でも使えるので、absoluteやfixedを使用しないといけない場合以外では、gridを使用する方法がオススメです。

まとめ

これまで使われてきたposition+transformを使わなくても、CSSの新しいプロパティを活用すれば、シンプルな記述で要素を上下左右中央に配置できます。

  • grid を使えば要素の幅や高さ関係なく簡単
  • absolute/fixedの場合はinsetを活用、サイズ不定の場合はtranslateを使用するのも有用

これからは、シンプルな方法で中央配置を実装しましょう！

参考

タグ: