CSS 📅 2026年5月12日 🔄 更新: 2026-05-12 ⏱ 9分で読めます

CSSの中央揃えができない原因と解決法まとめ【全パターン網羅】

CSSの中央揃えの全パターンを解説。テキスト、ブロック要素、Flexbox、Grid、上下中央揃えの方法と、うまくいかない原因を紹介。中高生向け。無料。

2026年5月12日

CSSの中央揃え完全ガイド

「中央揃えにしたいのにできない」——CSS初心者が最もよく検索する問題です。中央揃えには複数の方法があり、状況に応じて使い分けます。

この記事では、よくある「中央揃えのパターン」をすべて解説します。「テキストを中央にしたい」「ボックスを中央にしたい」「上下も中央にしたい」など、状況別にコード例で確認していきましょう。

CSSではじめてのスタイルを書こうを読んだ人が次につまずくポイントです。CSSの基本的な書き方がわかっている方を対象にしています。

パターン別解決法 早見表

まずは一覧で確認しましょう。詳しくはこの後の各セクションで解説します。

やりたいことCSS
テキストを水平中央text-align: center
ブロック要素を水平中央margin: 0 auto（widthが必要）
Flexboxで水平中央親に display:flex; justify-content:center
Flexboxで垂直中央親に display:flex; align-items:center
Flexboxで上下左右中央親に display:flex; justify-content:center; align-items:center
Gridで上下左右中央親に display:grid; place-items:center

2026年のおすすめ：display:grid; place-items:center が最もシンプル。1行で上下左右中央揃えが完成します。

パターン1：テキストを横方向に中央揃え

文字やテキストを横方向に中央揃えにするには、text-align: center を使います。

これは最もシンプルな中央揃えで、<p> や <h1> などのテキストが含まれる要素に使います。

/* テキストを横方向に中央揃え */
p {
  text-align: center;
}

h1 {
  text-align: center;
}

💡 text-align: center の注意点

text-align はテキスト（インライン要素）を中央にします。<div> などのブロック要素自体を中央に移動したいときは、この後で解説する margin: 0 auto を使います。

パターン2：ブロック要素を横方向に中央揃え

<div> などのブロック要素を横方向に中央に置きたいときは、margin: 0 auto を使います。

ポイント：必ず width を指定する必要があります。幅が100%のままでは中央に寄せる余白がないからです。

/* ブロック要素を横方向に中央揃え */
.box {
  width: 300px;        /* ← widthが必要！ */
  margin: 0 auto;      /* 左右のmarginを均等に */
  background-color: #0d9488;
  padding: 16px;
}

⚠️ margin: 0 auto が効かないときは幅を確認！

widthを指定し忘れると、要素が画面幅いっぱいに広がってしまい、中央揃えの効果が見えません。width: 300px や max-width: 600px を必ずつけましょう。

パターン3：Flexboxで中央揃え

Flexboxを使うと、横方向・縦方向・上下左右の中央揃えをまとめて制御できます。

Flexboxの中央揃えは「親要素に指定する」ことがポイントです。中央にしたい要素の親要素に書きます。

/* Flexboxで横方向に中央揃え */
.container {
  display: flex;
  justify-content: center;
}

/* Flexboxで縦方向に中央揃え */
.container {
  display: flex;
  align-items: center;
  height: 200px;   /* ← 高さが必要！ */
}

/* Flexboxで上下左右すべて中央揃え */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

FlexboxについてはCSSフレックスボックス入門で詳しく解説しています。

パターン4：Gridで上下左右すべて中央揃え（最もシンプル）

2026年現在のおすすめ方法です。display: grid; place-items: center; の2行だけで、上下左右すべてを中央揃えにできます。

/* Gridで上下左右中央揃え（最もシンプル！） */
.container {
  display: grid;
  place-items: center;   /* ← 1行だけ！ */
  height: 300px;
}

place-items は align-items（縦方向）と justify-items（横方向）をまとめて指定するショートハンド（省略記法）です。center を指定すると、両方まとめて中央揃えになります。

💡 高さを忘れずに！

縦方向の中央揃えには親要素に高さが必要です。height: 300px や min-height: 100vh などを指定しましょう。高さがないと中央揃えの効果が見えません。

うまくいかない原因と解決法

margin: 0 auto が効かない

原因：widthが指定されていない。ブロック要素はデフォルトで幅100%なので、中央に寄せる余白がない。

解決：width: 300px や max-width: 600px を指定する。

text-align: center が効かない

原因：text-alignはテキスト（インライン要素）を中央にするプロパティ。ブロック要素自体を移動させるわけではない。

解決：ブロック要素自体を中央にしたいなら margin: 0 auto を使う。

Flexboxで縦方向の中央にならない

原因：親要素に高さが指定されていない（height が 0 に等しい状態）。

解決：親に min-height: 100vh や具体的な高さを指定する。

position: absolute で中央にしようとしてズレる

古い方法として position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) という書き方がありますが、Flexbox や Grid の方が簡単でミスが少ないです。

marginとpaddingで余白の仕組みを理解。displayプロパティでblock/inlineの違いを確認。レイアウトが崩れる原因と直し方も参考に。

実際に書いてみよう

3つの中央揃えパターンを1つのHTMLファイルで試してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>中央揃えの練習</title>
    <style>
      /* ① テキスト中央揃え */
      .text-center {
        text-align: center;
      }

      /* ② ブロック要素を中央に */
      .block-center {
        width: 300px;
        margin: 0 auto;
        background-color: #e0f2fe;
        padding: 16px;
      }

      /* ③ 上下左右すべて中央（Gridが簡単） */
      .full-center {
        display: grid;
        place-items: center;
        height: 200px;
        background-color: #f0fdf4;
        border: 2px solid #0d9488;
      }
    </style>
  </head>
  <body>
    <h1 class="text-center">テキスト中央揃え</h1>

    <div class="block-center">
      <p>このブロックは中央にあります</p>
    </div>

    <div class="full-center">
      <p>上下左右の中央にあります！</p>
    </div>
  </body>
</html>

このコードをコピーして、HTMLファイルとして保存し、ブラウザで開いてみましょう。3種類の中央揃えがどう違うか確認できます。

中央揃えをどれにすべきか迷ったときは

状況に応じてどのパターンを使えばいいか、まとめます。

  • テキストだけ中央にしたい → text-align: center
  • ボックスを横方向の中央に置きたい → margin: 0 auto（widthを忘れずに）
  • 複数の子要素を横並び中央に → display: flex; justify-content: center
  • 1つの要素を上下左右の真ん中に置きたい → display: grid; place-items: center（最もシンプル）
  • ナビバーなど横並びで縦方向も中央に → display: flex; align-items: center

まとめ

  • ✅ テキスト中央 → text-align: center
  • ✅ ブロック中央 → margin: 0 auto + width指定
  • ✅ Flexboxで横中央 → justify-content: center
  • ✅ Flexboxで縦中央 → align-items: center（高さが必要）
  • ✅ 上下左右中央 → display:grid; place-items:center（最もシンプル）
  • ✅ 効かないときはwidth/heightの指定を確認

中央揃えを覚えると、ページのレイアウトの幅が大きく広がります。Flexboxの基本も一緒に学ぶと、さらにレイアウトが作りやすくなります。

あわせて読みたい記事

⚡ CSSの基礎を学ぼう！

中央揃えを含むCSSの基礎をもっと深く学べます。完全無料・登録不要。

CSSレッスン1を始める →
目次

コースで実際に手を動かして学ぼう

レッスンではコードを書きながら基礎が身につきます

HTMLコースを始める →

関連記事

CSS

CSSフレックスボックス入門【初心者向けわかりやすい解説】

flexboxの使い方を初心者向けに解説。横並び・中央揃えなどよく使うレイアウトをコード例で学べます。

 CSS

CSS Gridで実際のWebページレイアウトを作ろう【3つの実践パターン】 | プログラミング入門

CSS Gridを使った実際のWebページレイアウトを3パターン紹介。ヘッダー＋サイドバー、カードギャラリー、ダッシュボードの作り方を初心者向けに解説します。

 CSS

部活動のWebサイトを作ろう！HTML/CSSで部活紹介ページ | プログラミング入門

部活動のWebサイトをHTML/CSSで作る方法を中高生向けに解説。部活紹介ページのコード例、デザインのコツ、GitHub Pagesでの公開方法を紹介します。

この記事に出てくる用語

𝕏 シェア LINE シェア

📣 この記事が役に立ったら

Xでシェア

💬 引用する場合はこちらをご利用ください:

CSSの中央揃えの全パターンを解説。テキスト、ブロック要素、Flexbox、Grid、上下中央揃えの方法と、うまくいかない原因を紹介。中高生向け。無料。

出典: https://start-web-programming.com/blog/css-center-guide/