目次
はじめに：中央寄せで迷う最大の理由
CSSでレイアウトを組んでいると、
- 中央寄せしたい
- flexとgrid、どっちを使えばいいの？
- 似たようなコードが多くて違いが分からない
と感じたことはありませんか？
実際、
CSSの中央寄せは「できる方法が多すぎる」ことが混乱の原因です。
この記事では、
HTML / CSS初心者の方でも迷わないように、
- flexでの中央寄せ
- gridでの中央寄せ
- それぞれの違いと使い分け
を基礎から丁寧に解説します。
中央寄せとは何を指すのか
まず、中央寄せには次の2種類があります。
- 横方向の中央寄せ
- 縦方向の中央寄せ
- 縦横両方の中央寄せ
flexもgridも、
これらすべてに対応できます。
flexboxで中央寄せする方法
flexは「並び」を得意とするレイアウトです。
.container {
display: flex;
justify-content: center;
align-items: center;
}各プロパティの意味
- justify-content
横方向の配置 - align-items
縦方向の配置
この2つを組み合わせることで、
縦横中央寄せが実現できます。
flex中央寄せの特徴
flexの特徴を整理します。
- 1方向（横 or 縦）のレイアウトが得意
- 要素の並び順を直感的に制御できる
- 中央寄せの記述が分かりやすい
よく使われる場面
- ボタンの中央寄せ
- ナビゲーションメニュー
- 横並び要素の中央配置
gridで中央寄せする方法
gridは「面（行と列）」で考えるレイアウトです。
.container {
display: grid;
place-items: center;
}place-itemsとは
- align-items
- justify-items
この2つをまとめたショートハンドです。
grid中央寄せの特徴
gridの特徴はこちらです。
- 行と列を同時に扱える
- コードが非常に短い
- 複雑なレイアウトに強い
よく使われる場面
- 1要素をど真ん中に配置
- カードレイアウト
- 画面全体の中央配置
flexとgridの違いを比較
ここで違いを整理します。
考え方の違い
-
flex
並び（1次元）を考える -
grid
行と列（2次元）を考える
中央寄せだけならどちらが簡単？
結論から言うと、
-
単純な中央寄せ
→ grid -
横並び・縦並びが絡む
→ flex
が分かりやすいです。
コード量の違い
flexの場合
display: flex;
justify-content: center;
align-items: center;gridの場合
display: grid;
place-items: center;gridの方が短く書けるのが特徴です。
よくある失敗①：flexで縦中央にならない
原因は高さ不足です。
.container {
display: flex;
align-items: center;
}親要素に高さがないと、
縦中央は計算されません。
対処法
.container {
height: 100vh;
}よくある失敗②：gridで中央に来ない
gridでも、
親要素のサイズが重要です。
.container {
display: grid;
place-items: center;
}こちらも、
親に高さが必要です。
レスポンシブ対応の考え方
中央寄せ自体は、
レスポンシブと相性が良いです。
ただし、
- 固定幅
- 固定高さ
を使いすぎると、
スマホで崩れやすくなります。
flexとgridの使い分けまとめ
迷ったら次を基準にしてください。
-
横並び・縦並びが主役
→ flex -
レイアウト全体を制御
→ grid -
ただ中央に置きたい
→ grid
初心者におすすめの覚え方
まずは、
- flex：並べる
- grid：区切る
と覚えればOKです。
中央寄せは、
その結果として自然にできるもの
と考えると理解しやすくなります。
まとめ：中央寄せは「目的」で選ぶ
CSSの中央寄せにおいて、
- flexが正解
- gridが正解
という絶対的な答えはありません。
重要なのは、
- 要素をどう並べたいか
- 今後レイアウトが増えるか
です。
HTML/CSS初心者の方は、
まず flexとgridの役割の違い を理解し、
用途に応じて使い分けてみてください。
それだけで、
中央寄せの迷いは一気に減ります。