flexboxで中央揃えにする【横・縦・上下左右中央揃えの3つの方法】

今回はflexboxで子要素を中央揃えにする方法を解説していきます。
flexboxでうまく中央揃えが出来ないという方は是非参考にしてみてください。

細かく記載したため、長文になっているので、結論だけ知りたいという場合は、下の表や「詳しく見る」ボタンから実際のHTMLやCSSなど必要な部分だけご覧いただいても大丈夫です。

▼基本的な中央揃え3つの方法（親要素にCSSで指定）

flexbox横並びの場合: ①display:flex; ②flex-direction:row;またはflex-direction:row-reverse; ③justify-content:center;
詳しく見る
flexbox縦並びの場合: ①display:flex; ②flex-direction:column;またはflex-direction:column-reverse; ③justify-content:center;
詳しく見る
上下左右中央揃え: ①display:flex; ②justify-content:center; ③align-items:center;
詳しく見る

CSSで全て親要素（フレックスコンテナー）に指定してください。

【重要】flexboxで中央揃えにする際の大前提
1. 【STEP1】主軸の方向をflex-directionで決める
2. 【STEP2】中央揃えのためのプロパティをCSSで指定する
flexbox横並びで中央に揃える
flexbox縦並びで中央に揃える
flexboxで上下左右中央に揃える
まとめ
お問い合わせ・ご相談

【重要】flexboxで中央揃えにする際の大前提

まず、flexboxで中央揃えにする際して「主軸の方向」を理解しておく必要があります。
要はflexboxで子要素（フレックスアイテム）をどの方向に配置するのかということです。

この「主軸の方向」によって中央揃えのために指定するプロパティが変わってくるので、これを理解しておかなければ「うまく中央揃えができない」という落とし穴にハマることがあります。

【STEP1】主軸の方向をflex-directionで決める

flex-directionは①主軸の方向や②向き (順方向または逆方向) を定義するCSSのプロパティで次の4つです。親要素（フレックスコンテナー）に指定します。(※)

flex-direction:row;: flexbox 横並び・順方向（左から右）
flex-direction:row-reverse;: flexbox 横並び・逆方向（右から左）
flex-direction:column;: flexbox 縦並び・順方向（上から下）
flex-direction:column-reverse;: flexbox 縦並び・逆方向（下から上）

※もう少し具体的に記載すると・・・
子要素（フレックスアイテム）を、
①横並びにするのか、縦並びにするのか
②横並びの場合は「右から左」「左から右」のどちらの向きに並べるのか
　縦並びの場合は「上から下」「下から上」どちらの向きに並べるのか
を決めるためにflex-directionを指定します。

【STEP2】中央揃えのためのプロパティをCSSで指定する

flex-directionで主軸の方向を決めたら、子要素（フレックスコンテナ）中央に揃えるための次のプロパティをCSSで指定します。

親要素にjustify-content:center;を指定

※上下左右中央揃えにする場合は、少し異なるのでこちらをご確認ください。

＊POINT
ここで間違える場合があるとすると、親要素（フレックスコンテナー）にflex-direction:column;またはflex-direction:column-reverse;を指定して、子要素（フレックスアイテム）を垂直方向に縦並びにした場合につい横並びにしたときの感覚でalign-items:center;を指定してしまうことです。
align-itemsは主軸方向に対して交差軸（クロス軸）方向のアイテムの配置を指定するプロパティです。

flexbox横並びで中央に揃える

子要素（フレックスアイテム）を横並びにした場合に、親要素の中央に子要素を揃えるには、親要素にjustify-content:center;を指定します。

親要素にjustify-content:center;を指定

▼HTMLはこちら

<div class="flex-parent">
　<div class="flex-child">
        <!--------
        ここに内容
        --------->
　</div>
 </div>

▼CSSはこちら

.flex-parent {
  width:100%;
  height:auto;
  display:flex;
  justify-content:center; /*これを指定*/
}
.flex-child {
  width:200px;
  height:200px;
}

＊POINT
flexbox横並びで右から左に子要素を並べたい場合は、
親要素に「flex-direction:row-reverse;」をプラスで指定してください。

※子要素（上記例で言うと「flex-child」）の横幅・高さはご自身が指定したいサイズに変更してください。

flexbox縦並びで中央に揃える

子要素（フレックスアイテム）を縦並びで中央に揃えたい場合には、
まず親要素に「flex-direction:column;」または「flex-direction:column-reverse;」を指定して縦並び（垂直方向）にし、中央に揃えるために親要素にjustify-content:center;を指定します。

親要素にjustify-content:center;を指定

縦並びである以上、親要素に高さがないと中央に揃えることができないので、親要素に「px」や「vh」などで高さを指定してください。

▼HTMLはこちら

<div class="flex-parent">
　<div class="flex-child">
        <!--------
        ここに内容
        --------->
　</div>
 </div>

▼CSSはこちら

.flex-parent {
  width:100%;
  height:240px; /*高さを指定*/
  display:flex;
  flex-direction:column; /*これを指定*/
  justify-content:center; /*これを指定*/
}
.flex-child {
  width:120px;
  height:120px;
}

＊POINT
flexboxで子要素を縦並びにするには、
「flex-direction:column;」または「flex-direction:column-reverse;」を指定します。
また親要素に「px」や「vh」などで高さを指定してください。
子要素は高さを指定しなくても大丈夫です。

flexboxで上下左右中央に揃える

子要素（フレックスアイテム）を上下左右中央に揃えたい場合には、親要素にjustify-content:center;を指定します。ただし、これだけでは横並びの状態で中央に表示されただけなので、さらにalign-items:center;（※）を指定します。

親要素にjustify-content:center;とalign-items:center;を指定

flexboxで上下左右中央に揃える場合も、親要素に高さが必要ですので「px」や「vh」などで高さを指定してください。

▼HTMLはこちら

<div class="flex-parent">
　<div class="flex-child">
        <!--------
        ここに内容
        --------->
　</div>
 </div>

▼CSSはこちら

.flex-parent {
  width:100%;
  height:240px; /*高さを指定*/
  display:flex;
  justify-content:center; /*これを指定*/
  align-items:center; /*これを指定*/
}
.flex-child {
  width:120px;
  height:120px;
}

＊align-itemsとは
flexboxでは「align-items」は交差軸（クロス軸）方向のアイテムの配置をします。
交差軸 (クロス軸) とは、主軸と交差する軸のことで、flex-direction:row;またはflex-direction:row-reverse;の場合は列方向、つまり縦（垂直）方向の軸です。
flex-direction:column;またはflex-direction:column-reverse;の場合だと、行方向、つまり横（水平）方向の軸になります。

flexbox横並びと縦並びの上下中央揃えの違いについて

上記CSSで親要素に仮にflex-direction:column;やflex-direction:column-reverse;指定されていても同じ結果になります。理由としては、justify-contentは主軸の方向に沿った配置を指定し、align-itemsは交差軸に沿った配置を指定するからです。具体的に言うと、横並びの場合は、justify-content:center;で横方向の配置でセンタリングし、align-itemsで縦方向の配置をセンタリングします。
これが縦並びになると主軸が垂直になるのでjustify-content:center;で縦方向の配置をセンタリングし、align-itemsで横方向の配置をセンタリングするので、flexboxの横並びと縦並びでjustify-contentとalign-itemsの実際のそれぞれの配置は違うのですが、見た目としては同じになります。

まとめ

今回はflexboxで子要素を中央揃えにする方法を解説しました。
まとめると、flexboxで子要素を中央揃えにしたい場合は、親要素にjustify-content:center;を指定し、上下左右中央揃えにしたい場合は、justify-content:center;とalign-items:center;を指定します。

flexboxの中央揃えは使用する機会も多いと思いますので、みなさんの参考になれば嬉しいです。