Flexboxで上下左右中央寄せするコードはこちらです。
display: flex;justify-content: center;align-items: center;
親要素に指定するだけで、子要素が上下左右中央に配置されます。
完成イメージ
まずは上下左右中央寄せの完成イメージを見てください。
青い部分が親要素、白い部分が子要素。子要素が親要素の上下左右中央に配置されていますね。
実装コード（コピペOK）
このHTMLとCSSを組み合わせることで、上の完成イメージが実現します。
HTML
<div class="wrap">
<div class="container">中央寄せ</div>
</div>
CSS
/* 外側の親要素（コンテナ） */
.wrap {
width: 90%;
max-width: 500px;
height: 500px;
margin: 0 auto;
background-color: #0072ff;
/* ↓↓↓ 縦横中央寄せの核となる3行 ↓↓↓ */
display: flex;
justify-content: center; /* 横方向の中央揃え */
align-items: center; /* 縦方向の中央揃え */
}
/* 内側の要素（アイテム） */
.container {
width: 200px;
height: 200px;
background-color: #f4f5f7;
font-size: 2em;
/* .container内のテキストも中央に寄せるためのFlexbox（オプション） */
display: flex;
justify-content: center;
align-items: center;
}3行コードを削除した状態のイメージ
display: flex;justify-content: center;align-items: center;
この3行がなければ、子要素は左上に配置されます。
うまく中央寄せできない場合：
縦方向の中央寄せが効かないときは、ほとんどが親要素の高さ不足が原因です。
縦方向の中央寄せが効かない時の解決策
Flexbox中央寄せのコード解説
前の章のコードが、どのように中央寄せを実現しているかを解説します。
HTMLの役割（コンテナとアイテム）
Flexboxは、要素の親子関係に基づいて動作します。
- Flexコンテナ (
.wrap): 親要素です。すべての配置ルール（CSS）はここに設定します。 - Flexアイテム (
.container): 子要素です。親の指示に従って位置が決定されます。
CSSの核となる3つのプロパティ
親要素（Flexコンテナ）に、以下の3つのプロパティを設定するだけで中央寄せが完了します。
display: flex;
- 役割: Flexboxの機能を開始します。
- 目的: これにより、子要素の配置を制御する権限を親に与えます。
justify-content: center;
- 役割: 横方向（主軸）の配置を制御します。
- 目的: 子要素を横の真ん中に集めます。
align-items: center;
- 役割: 縦方向（交差軸）の配置を制御します。
- 目的: 子要素を縦の真ん中に集めます。
縦方向の中央寄せが効かない時の解決策
縦方向の中央寄せ（align-items: center;）が効かない場合、原因はほぼ「親要素の高さ不足」です。
中央寄せできない原因：親要素の高さ不足
align-items: center; が効かない場合は、親要素に高さがないのが原因です。
高さがないと子要素と同じ高さになり、縦中央には配置されません。
親要素の高さを指定しないとこうなります
解決策：親要素に高さを指定する
| 設定したい状況 | CSSの記述例 |
| 画面全体の中央に要素を置きたい場合 | min-height: 100vh; |
| 決まったサイズの中央に要素を置きたい場合 | height: 500px; (例) |
もっと理解したい方へ
Flexboxの仕組みをしっかり理解したい場合は、動画で学ぶのもおすすめです。
私が受講した講座の感想はこちらにまとめています。
