今回の記事ではflex-boxを使用した上下左右中央寄せのやり方を紹介いたします。

何も指定していない状態だと左上に表示されます。

この緑色の四角形を上下左右中央に寄せたいとします。

やり方

まずは四角形に対してdisplay:flex;を指定します。

続けてjustify-content: center;と指定します。

これで左右中央になります。

続いてalign-items: center;と指定します。

これで上下中央になります。

すると

このように上下左右中央寄せで表示することができます。