CSSでフレックスボックスを使って要素を中央に寄せる場合は、justify-contentとalign-itemsというプロパティを使用します。margin 0 autoやtext-alignとの違いをしっかり理解していきましょう。

justify-contentとは

justify-contentとは、flexアイテムの配置設定を行なうCSSのプロパティです。
フレックスボックス（display:flex）を指定した親要素に対する子要素のことをflexアイテムと呼びます。
すなわち、display:flexが指定されていない状態でjustify-contentを使って配置設定を行なうことはできません。
2つが揃わないと機能しないプロパティなのでセットで覚えておきましょう。

justify-contentプロパティの初期値は左寄せ（flex-start）になっており、指定できる値には、
flex-end（右寄せ）、center（中央寄せ）、space-between（flexアイテムの両端揃え）など他にもいくつかの配置を指定する値が用意されています。

justify-contentの余白は、主軸となる方向につけられます。display:flexを指定している場合、基本的には横方向が主軸となりますが、flex-direction（並ぶ方向を指定するプロパティ）が指定されいる場合などは縦が主軸になることもあります。

align-itemsとは

align-itemsとは、flexアイテムの縦軸の配置を調整するCSSのプロパティです。
上下のどこで揃えるのかを指定できます。
このプロパティもdisplay:flexが指定されていないと機能しませんので注意しましょう。

具体的な値には、flex-start（上揃え）、flex-end（下揃え）、center（中央揃え）などがあります。
他にも要素の伸縮やテキストの位置を基準とした指定も可能です。

大きさの違う画像を並べるときや、flexアイテムの中にテキストがあるときなど便利なので、使いこなせるようにしておきましょう。

あらかじめエディタに書くコード

                    <div class="boxs">
  <div class="box"></div>
</div>
¥HTML¥
                

                    .boxs {
  width: 300px;
  height: 300px;
  background: blue;
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  background: black;
}
¥CSS¥
                

期待する画面