【CSS】上下中央揃えのレイアウトの仕方（Flexbox・Grid）

※独学で勉強している素人の記事なので間違いがありましたらコメント欄で教えていただけると嬉しいです。

CSSの勉強をしています。今日はFlexboxとGridを使ったときの上下中央揃えのサンプルコードをメモしておきます。

Flexboxを使った上下中央揃えのサンプルCSS

<div class="container">
  <div class="container_inner">
  </div>
</div>

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

Gridを使った上下中央揃えのサンプルCSS

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

place-itemsについて補足

place-itemsプロパティは

• align-items
• justify-items

の一括プロパティです。アイテムのブロック軸およびインライン軸に沿ったアイテムの配置を一度に指定することができます。

プロパティについて

FlexboxとGridレイアウトが苦手で、justify-content と align-itemsの違いなどを調べているうちに時間が経ってしまいます。

prefix	機能	suffix	対象	機能
align-	上下（垂直）方向の調整	-items	全ての要素	中のすべての要素の位置を調整する
		-self	子	指定した個別の要素の位置を調整する
		-content	親全ての要素	親（外枠）の位置を調整する
justify-	左右（水平）方向の調整	-items	全ての要素	中のすべての要素の位置を調整する
		-self	子	指定した個別の要素の位置を調整する
		-content	親全ての要素	親（外枠）の位置を調整する

一覧にするとこんな感じ。※フレックスボックスレイアウトでは、justify-itemsは無視されます。

alignとつくと、上下（垂直）方向の位置調整に使い、justifyとつくと左右（水平）方向の調整に使います。

alignやjustifyの後にcontentがつくとフレックスコンテナの外枠の位置の調整で、itemsとつくと中身の位置調整。

contentとitemsの違いが分かりにくいですが、イメージはこんな感じかな。

雑感

IEがサポート外になったおかげでflexboxやgridレイアウトがベンダープレフィックスなしで実装できるようになったので記述が簡単になるましたね。

マイナスマージンやcalcを使わずに2行や3行で簡単に上下中央揃えができます。