Flexboxで縦並びかつ左右中央揃えがうまくいかない理由と対策

ポートフォリオ作成のため久しぶりにCSSを触って、思うようにいかなかったので解決方法を共有します！

Flexboxで縦並びかつ左右中央にする

要素を縦並びかつ左右中央揃えにしたいな〜
「よし！Flexboxを使おう！」

ということで、
要素を縦並びにするのは　flex-direction: column
要素を左右中央揃えにするには　justify-content: center

HTMLはこんな感じ

index.html

<main>
    <div class="main-box">
      <h1>タイトル</h1>
      <p>pタグです</p>
    </div>
  </main>

早速やってみる！

style.css

.main-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

あれ？あれれ？
左右中央にならない...

なぜ左右が中央にならないのか

ググってみたら発見した！

参照:https://baqamore.hatenablog.com/entry/2018/02/14/220836

この記事を書いた人曰く、縦並びにするということは、

こういうことだそうだ！

解決方法

ということは左右を中央に寄せたいならば、
justify-content: centerをalign-items:centerに変えれば......

style.css

.main-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

できた！！