「これ、中央に寄せたいだけなのに」という場面で、CSSには複数のやり方があって、どれを使えばいいか迷うことがあります。今回は代表的な3つの方法と、それぞれが向いている場面を整理します。

方法①: text-align: center（文字・インライン要素向け）

.box {
  text-align: center;
}
<div class="box">
  <p>この文章は中央に寄ります</p>
</div>

text-align: centerは、文字や画像など「行の中に横に並ぶもの（インライン要素）」を中央に寄せる指定です。<p>や<span>のような文章、<img>タグなどには効きますが、<div>のような「ブロック要素」自体の位置を動かすことはできません。

方法②: margin: 0 auto（ブロック要素を横方向だけ中央に）

.box {
  width: 300px;
  margin: 0 auto;
}

ブロック要素（<div>など）そのものを横方向の中央に寄せたいときは、marginの左右をautoにします。ポイントは、width（幅）を明示していないと効かないことです。幅を指定していない<div>は、親の横幅いっぱいに広がろうとするため、「中央に寄せる」余白の計算がそもそも発生しません。また、この方法は横方向専用で、縦方向の中央揃えには使えません。

方法③: flexbox（横も縦も中央に）

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

親要素にdisplay: flexを付けると、中の要素を横にも縦にも中央寄せできます。justify-content: centerが横方向、align-items: centerが縦方向の中央揃えです。②と違ってwidthの指定は不要で、縦方向も一度に揃えられるのが強みです。ボタンをカードの真ん中に置きたい、画面全体の中央にログインフォームを表示したい、といった「縦も横も中央」の場面では、最初からこの方法を選ぶのが早いです。

使い分けの目安

  • 文章や画像など、行の中の要素を寄せたいだけ → text-align: center
  • ブロック要素を横方向だけ中央にしたい（昔からあるレイアウトでよく見る形） → margin: 0 auto
  • 縦横どちらも中央にしたい、あるいは中央揃え以外の並べ方（左右に離す、均等に並べるなど）もいずれ使いそうな場所 → flexbox

迷ったときは、最初からflexboxを選んでおくと、後から「縦も揃えたくなった」「間隔も調整したくなった」という要望に、同じ仕組みのまま対応しやすいと感じています。text-alignやmargin: autoは、対象が文章だけ・横方向だけとはっきりしている場面での軽量な選択肢という位置づけです。

つまずきやすい点: widthを指定し忘れる

/* Before: widthが無いので中央に寄らない */
.box {
  margin: 0 auto;
}
/* After: widthを指定すると、その幅の分だけ左右に余白が生まれて中央に寄る */
.box {
  width: 300px;
  margin: 0 auto;
}

margin: 0 autoを使ったのに中央に寄らないときは、widthを指定し忘れているケースをまず疑ってみてください。幅を指定せずにmargin: 0 autoだけ書いても、要素が横いっぱいに広がっていて余白が生まれないため、何も起きていないように見えます。widthが指定されているかを確認するだけで、原因の切り分けがぐっと早くなります。

AIに書いてもらったCSSでも、このパターンでwidthが抜けていることがあるので、「中央に寄らない」と伝えるだけでなく、widthを指定しているかどうかまで一緒に確認してもらうと話が早いです。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全24セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください