目次
- はじめに｜中央寄せで止まる時間、もったいない
- まず整理｜「中央寄せ」は3種類ある
- 横方向だけ中央
- 縦方向だけ中央
- 縦横ど真ん中
- flexで中央寄せする方法
- それぞれの意味（超重要）
- flex-directionで軸はひっくり返る
- flexが向いているケース
- gridで中央寄せする方法
- place-itemsの正体
- gridが向いているケース
- 本質的な違い｜なぜ似ているのに思想が違うのか
- flex
- grid
- 中央寄せが効かない原因チェックリスト
- ✔ 親要素に高さはあるか？
- ✔ displayは本当に指定されている？
- ✔ 別のCSSに上書きされていない？
- ✔ 子要素に書いていない？
- ✔ 高さがautoのままになっていない？
- DevToolsでの具体的な確認手順（実務で必須）
- スマホで崩れる理由と横スクロール問題
- 固定幅が原因のことが多い
- 100vhの落とし穴
- flexとgridの使い分け早見表
- 実務でのおすすめ思考法
- まとめ｜中央寄せはテクニックではなく設計
はじめに｜中央寄せで止まる時間、もったいない
「CSS 中央寄せ 効かない」
この検索、何回したか分かりません。
- なぜか縦だけ中央にならない
- flex書いたのに動かない
- スマホでだけ崩れる
- 横スクロールが出る
私も昔、ヒーローセクションをど真ん中にしたいだけなのに30分溶かしました。
原因は単純で、親要素に高さがなかっただけ。それに気づくまで延々プロパティを疑っていたんです。
中央寄せは簡単そうで、地味に落とし穴が多い。
だからこそ、仕組みから理解しておくと二度と迷いません。
この記事では、
- flexとgridの違い
- 横・縦・縦横中央の具体コード
- 中央寄せが効かない理由
- DevToolsでの確認手順
- スマホ崩れ・横スクロール問題の原因
- 実務での使い分け基準
まで、現場で本当に使っている考え方で整理します。
まず整理｜「中央寄せ」は3種類ある
スニペット向けに一文でまとめるとこうです。
CSSの中央寄せは「横方向」「縦方向」「縦横両方」の3種類がある。
ここを曖昧にすると必ず混乱します。
横方向だけ中央
左右の真ん中にしたいケース。
縦方向だけ中央
高さの中で真ん中にしたいケース。
縦横ど真ん中
ヒーローやローディング画面など。
まずは「どの中央なのか」を決める。
ここがスタートです。
flexで中央寄せする方法
flexは1方向の並びを制御する仕組みです。
.container {
display: flex;
justify-content: center;
align-items: center;
}それぞれの意味（超重要）
justify-content→ 主軸方向の中央align-items→ 交差軸方向の中央
ここが混乱ポイント。
flex-directionで軸はひっくり返る
.container {
display: flex;
flex-direction: column;
}この瞬間、
- justify-content → 縦方向
- align-items → 横方向
になります。
「中央にならない…」の8割はこれ。
実務でよくあるのが、
途中で flex-direction: column; を追加して、
中央がズレたのに気づかないパターン。
flexが向いているケース
- ナビメニューを中央揃え
- ボタンを横並びで中央
- 並び順を後から変更する可能性がある
つまり、
並びが主役ならflex
です。
gridで中央寄せする方法
gridは面で考えるレイアウトです。
.container {
display: grid;
place-items: center;
}これだけで縦横中央。
短い。分かりやすい。
place-itemsの正体
place-items は次のまとめ書きです。
align-items: center;
justify-items: center;gridは「セルの中でどう置くか」を決める仕組み。
だから中央寄せが直感的なんです。
gridが向いているケース
- 画面中央に1つだけ配置
- ローディング画面
- モーダルの中央配置
- LPのヒーロー中央コピー
中央配置そのものが目的ならgridはかなり楽。
本質的な違い｜なぜ似ているのに思想が違うのか
flex
- 1次元
- コンテンツの流れが中心
- 並びを整えるための仕組み
grid
- 2次元
- レイアウト構造を作る
- 面で区切る
中央寄せはどちらでもできます。
でも「何を主役にするか」で選びます。
中央寄せが効かない原因チェックリスト
✔ 親要素に高さはあるか？
.container {
min-height: 100vh;
}高さがなければ縦中央は成立しません。
✔ displayは本当に指定されている？
DevToolsで確認。
- F12を押す
- Elementsタブ
- 対象要素をクリック
- Computedを見る
display: flex になっていないこと、よくあります。
✔ 別のCSSに上書きされていない？
DevToolsの「Styles」で
打ち消し線がついていないか確認。
CSSは後勝ちです。
✔ 子要素に書いていない？
justify-content は親に書きます。
子に書いても動きません。
✔ 高さがautoのままになっていない？
よくある失敗例：
.container {
display: flex;
align-items: center;
}でも高さが中身と同じ。
結果、中央に見えない。
DevToolsでの具体的な確認手順（実務で必須）
- F12で開く
- 対象要素を選択
- 「Layout」タブを見る（Chrome）
- flexやgridの可視化をONにする
これで軸がどちら向きか一瞬で分かります。
さらに：
- サイズ欄でheightを確認
- overflowの有無を確認
- 横スクロール発生時はbodyをチェック
中央寄せが崩れているときは、
だいたい周辺のCSSが原因です。
スマホで崩れる理由と横スクロール問題
固定幅が原因のことが多い
width: 1200px;これがスマホで横スクロールを生みます。
安全なのは：
max-width: 1200px;
width: 100%;
padding: 20px;
margin: 0 auto;100vhの落とし穴
スマホSafariではアドレスバー分が含まれます。
縦中央がズレることがあります。
最近は：
min-height: 100svh;の方が安定します。
ここは競合記事であまり触れられていないポイント。
flexとgridの使い分け早見表
- 横並びを中央 → flex
- 1要素を中央 → grid
- 将来増える可能性あり → flex
- レイアウトを組む → grid
- 単純な中央表示 → grid
迷ったら「主役は並びか？」で考える。
実務でのおすすめ思考法
中央寄せだけを考えないこと。
- 将来要素は増える？
- レスポンシブで並びは変わる？
- モーダルか？ナビか？
その文脈で決める。
私は今、
- UI部品 → flex
- ページ構造 → grid
- 単体中央 → grid
でほぼ迷いません。
まとめ｜中央寄せはテクニックではなく設計
中央寄せは魔法のプロパティ探しではありません。
- 方向を決める
- 軸を理解する
- 親のサイズを確認する
- DevToolsで可視化する
この流れができれば、
「中央寄せ 効かない」で検索する日は終わります。
覚え方はシンプル。
flex＝並べる
grid＝区切る
中央に置くのは、その結果です。
レイアウトが整理できると、
スマホ崩れも横スクロールも怖くなくなります。
ここまで理解できれば、
中央寄せはもう悩みどころではありません。