CSS Gridで要素を上下左右中央に配置する方法

最短の中央配置

親要素をGridコンテナにし、place-items:centerを指定すると、子要素を縦横の中央へ配置できます。中央配置の基準となる高さが必要です。

.container {
  display: grid;
  place-items: center;
  min-block-size: 100svh;
}

place-itemsの意味

place-itemsはalign-itemsとjustify-itemsのショートハンドです。Grid内の各アイテムをセル内でどう揃えるかを指定します。

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

似たプロパティとの違い

• place-items：各Gridアイテムをセル内で揃える
• place-content：Grid全体をコンテナ内で揃える
• place-self：特定のアイテムだけ揃え方を変える
• margin: auto：利用可能な余白を要素へ割り当てる

Flexboxとの使い分け

単一方向の並びやナビゲーションならFlexbox、行と列を同時に設計するならGridが自然です。単一要素の中央配置はどちらでも簡潔に書けるため、周辺レイアウトと合わせて選びます。

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

参考資料

• MDN: Center an element
• MDN: place-items