More than 3 years have passed since last update.

【初心者でもわかる】gridを使った中央揃えの方法と、flexboxを使った中央揃えの方法

Posted at 2021-05-23

#どうも7noteです。gridとflexboxを使った中央揃えの方法一覧

webではコンテンツの中央揃えは頻出します。

上下の中央揃え、左右の中央揃え、上下左右の中央揃えの書き方をマスターすることはWEB制作では必須になるでしょう。

grid、もしくはflexboxを使った中央揃えは指定した子要素を中央揃えにすることができます。
なので、中央揃えにしたい親要素に対して使用します。

「上下左右」の中央揃え

style.css

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

style.css

.oya {
  display: grid;
  justify-content: center;
  align-items: center;

  /* もしくは */
  display: grid;
  place-items: center;
}

style.css

.oya {
  display: flex;
  align-items: center;
}

style.css

.oya {
  display: grid;
  align-items: center;
}

style.css

.oya {
  display: flex;
  justify-content: center;
}

style.css

.oya {
  display: grid;
  justify-content: center;
}

上下左右の中央寄せをするのであれば、flexboxかgridが有力な方法でしょう。
上下左右中央寄せを最も短く書ける方法なら、

display: grid;
place-items: center;

これで2行で書くことができます。

これ以外の方法でも中央揃えにする方法は様々ありますが、flexboxかgridが使えればレイアウトを作成するのに困る場面はそこまで多くないでしょう。