CSS Gridで要素を中央に表示する方法

Webサイトのコンテンツを中央揃えで表示させる方法は、昔からあるmarginを使うテクニックや最近では、flexboxを使ったりpositionとtransformを組み合わせて中央表示させる方法などがありますが、CSS Gridを利用しても同じように要素を中央に表示させることができます。

CSS Gridで中央揃えで表示

CSS Gridを使って中央に表示させるためには、以下のようなコードを記述します。

.item-center {
  display: grid;
  justify-items: center;
  align-items: center;
}

まず、中央表示させたい要素に対して「grid」を指定します。そして、justify-itemsプロパティとalign-itemsプロパティの値をそれぞれ「center」にすることで簡単にコンテンツを画面中央に表示させることができます。

また、「place-items」というプロパティを使うことで、先程の指定方法よりも少し簡略して記述することができます。

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

IEではサポートされていませんが、IEを非対応にしてよい制作要件の案件などでは、使えるCSSテクニックの1つかもしれません。

以上が、CSS Gridを使ってコンテンツを中央に表示させる方法となります。