CSSで中央寄せする方法｜水平・垂直・上下左右の使い分け

CSSで中央寄せする方法とは

「中央に置きたいのに、ずれる、効かない」は、CSS初心者がよく悩む場面です。原因は、水平方向と垂直方向で、使う方法が違うことです。現在は Flexbox か Grid を使えば、ほとんどの中央寄せが1〜2行で書けます。ここでは4つの方法を実際に描画して比べます。

基本（構文・仕組み）

テキストだけを水平に中央寄せするなら、親に text-align: center で足ります。これはブロックの配置ではなく、行内の中身（文字やインライン要素）を揃える指定です。

/* Flexbox */
.m1 { display: flex; justify-content: center; align-items: center; }
/* Grid */
.m2 { display: grid; place-items: center; }
/* absolute */
.m3 { position: relative; }
.m3 > span { position: absolute; inset: 0; margin: auto; width: 80px; height: 40px; }
/* margin: 0 auto は水平のみ */
.m4 > span { width: 80px; margin: 0 auto; }
/* flex の子に auto */
.m5 { display: flex; }
.m5 > span { margin: auto; }

サンプルコード（実行結果つき）

<div class="box m1"><span>flex</span></div>
<div class="box m2"><span>grid</span></div>
<div class="box m3"><span>abs</span></div>
<div class="box m4"><span>margin</span></div>
<div class="box m5"><span>auto</span></div>
<!-- .box は 300×160px、span は 80×40px + padding 6px -->

動作確認（検証環境と結果）

• 環境: Windows 11 / Microsoft Edge 154（Chromium系、headless）/ render.ps1 + getBoundingClientRect() と画面の目視
• ファイル: C:Tempks2techtestst2center.html、center.png

親の中心と子の中心のずれ（dx は水平、dy は垂直）を測りました。

margin: 0 auto は水平だけ揃い、垂直には効かないことを確認できました。

CSSで中央寄せする方法の注意点

• align-items: center は、親に高さがあるときだけ垂直の効果が見えます。高さがなければ、中身ぶんの高さに縮みます。
• margin: auto で水平中央にするには、ブロック要素に幅が必要です（width: fit-content も使えます）。
• 画面全体の中央に置くなら、親に min-height: 100vh（モバイルでは 100dvh）を付けます。rem・em・vh を参照してください。
• inset: 0; margin: auto の方法は、幅と高さを指定しないと中央寄せになりません。

CSSで中央寄せする方法でよくあるミス

• justify-content と align-items を逆に覚えている（flex-direction: column では逆になる）。
• text-align: center でブロック要素が揃うと思い込む。
• position: absolute; left: 50% だけで止め、要素の左端が中央に来る。
• 親の高さが0で、垂直方向に効いていない。

ブラウザ対応・バージョン

Flexbox と Grid は、主要ブラウザで利用できます。inset や、Flexbox 内での gap など新しいものは、can I use で対象ブラウザを確認してください。float や table-cell を使う古い方法は、現在は必須ではありません。

CSSで中央寄せする方法のチェックリスト

• 水平だけか、垂直も必要か、先に決めたか。
• 垂直に揃えるとき、親に高さがあるか。
• 子が複数ある場合、Flexbox の方向と gap を確認したか。
• 画面幅390pxで、はみ出していないか。

CSSで中央寄せする方法のFAQ（よくある質問）

Q. 一番簡単な上下左右中央寄せは？
A. 親に display: grid; place-items: center; です。子が複数ある場合は挙動が変わるため、Flexbox のほうが扱いやすいこともあります。

Q. margin: 0 auto が効きません。
A. 幅が指定されていない、display: inline になっている、親が flex で margin: auto の挙動が異なる、といった原因があります。

Q. 画像を中央に置くには？
A. 画像は inline 扱いなので、親に text-align: center か、display: block; margin: 0 auto; を使います。

CSSで中央寄せする方法の関連項目

• Flexbox
• CSS Grid
• CSS position
• rem・em・vh
• position: sticky