Web制作で「要素の上下左右中央寄せ」をしたい場面は多いです。
Flexboxを使えば簡単に上下左右中央寄せを実現できます。
display: flex;justify-content: center;align-items: center;
この3行を親要素に追加すれば、子要素が親要素の上下左右中央に配置されます。
完成イメージ
まずは上下左右中央寄せの完成イメージを見てください。
青い部分が親要素、白い部分が子要素。子要素が親要素の上下左右中央に配置されていますね。
実装コード（コピペ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;
- 役割: 縦方向（交差軸）の配置を制御します。
- 目的: 子要素を縦の真ん中に集めます。
縦方向の中央寄せが効かない時の解決策
Flexboxの基本的なコードは非常にシンプルですが、実際にウェブサイトに組み込む際に、「なぜか上下の中央に来ないな」「意図した配置にならない」といった問題に直面することがあります。
ここでは、特に縦方向の中央寄せ（align-items: center;）が効かない時に、まず確認すべき最重要ポイントを、やさしく解説します。
中央寄せが失敗する最大の原因：親要素の高さ不足
Flexboxで縦方向（上下）の中央寄せ（align-items: center;）が機能しない場合、最も頻繁に見られる原因は、親要素（Flexコンテナ）の高さにあります。
align-items: center; は、「親要素の利用可能な全高に対して、子要素を中央に配置する」という指示です。
しかし、親要素にheightプロパティが明示されていない場合、親要素の高さは自動的に「中に入っているコンテンツ（子要素）の高さ」と等しくなってしまいます。
結果として、子要素は常に親要素の全高の中に収まっている状態となり、中央寄せされているように見えなくなってしまうのです。
親要素の高さを指定しないとこうなります
確実な【解決策】
縦方向の中央寄せを行う際は、必ずFlexコンテナ（親要素）に、具体的な高さを設定してあげてください。
| 設定したい状況 | CSSの記述例 |
| 画面全体の中央に要素を置きたい場合 | min-height: 100vh; |
| 決まったサイズの中央に要素を置きたい場合 | height: 500px; (例) |
補足：横方向（左右）は、ほぼ問題なく成功します
横方向の中央寄せ（justify-content: center;）は、親要素の横幅が十分に広いことが多いため、特別な設定をしない限り、多くの場合スムーズに機能します。そのため、中央寄せで困った際は、まず「縦方向の高さ」を疑うのが確実な解決のコツとなります。
Web開発を学ぶならUdemyがおすすめ
コード解説は理解できましたか。この解説はAIに書いてもらったものを私が修正して完成させましたが、あまりわかりやすい解説ではないかもしれません。
CSSの基礎知識がある方はこれでもわかると思うのですが、まったくの初心者の方には難しいのではないでしょうか。
ちょっと難しいと感じた方は、動画学習サービスのUdemyでHTMLとCSSを基礎から勉強してみてはいかがでしょうか。
私も受講したおすすめ講座について感想を書いています👇
