TailwindCSS 中央寄せ テクニック三選｜場面別の使い分けを解説

TailwindCSS 中央寄せの方法を場面別に解説。mx-auto、text-center、flex justify-centerの使い分けがわからない方へ、実例付きで紹介します。

はじめに

TailwindCSS 中央寄せ、どのクラスを使えばいいか迷っていませんか？

「text-center を書いたのに動かない」「mx-auto を付けたのに左に寄ったまま」——そんな経験はありませんか？

実は、中央寄せには場面ごとに適切なクラスがあります。今回は、よく使う3つのテクニックを紹介します。

---

私の体験談

その前に、私の体験談を少しだけ聞いてください。

私も最初、TailwindCSSの配置でめちゃくちゃ苦労しました。

ボタンを中央に配置したいだけなのに、なぜか左端から動かない。モーダルを中央に置いたつもりが、微妙に右に寄ってる。Tailwind Playで何パターンも試して、数時間かけてやっと解決しました。

そんな苦労は、私だけで十分。この記事が誰かの役に立てば嬉しいです。

---

テクニック1: カードやコンテナを中央に配置する

ブロック要素（カードやコンテナ）を画面の中央に置きたいとき、mx-auto と max-w-* を組み合わせます。

読者Aさんの誤解

1. 公式ドキュメントの Margin ページを開く
   https://tailwindcss.com/docs/margin
2. mx-8 の例を見て「左右にマージンが付くんだな」と理解
3. mx-auto を見つけて「autoで左右均等 → 中央寄せできる！」
4. 早速カードに mx-auto を付けてみる
5. …動かない。横幅いっぱいのまま
6. 「なんで？公式に書いてあるのに…」

コード例

NG: mx-auto だけ

<div class="bg-slate-700 p-8">
  <div class="mx-auto bg-white rounded-lg shadow p-6">
    <h2 class="font-bold text-lg">カードタイトル</h2>
    <p class="text-gray-600 mt-2">カードの説明文がここに入ります。</p>
  </div>
</div>

OK: mx-auto + max-w-md

<div class="bg-slate-700 p-8">
  <div class="mx-auto max-w-md bg-white rounded-lg shadow p-6">
    <h2 class="font-bold text-lg">カードタイトル</h2>
    <p class="text-gray-600 mt-2">カードの説明文がここに入ります。</p>
  </div>
</div>

解説

mx-auto は左右マージンを auto にするクラスです。

ただし、要素の幅が100%のままだと、左右に余白が生まれません。

max-w-md などで幅を制限して初めて、左右に余白ができて中央に配置されます。

ポイント

カードやコンテナを中央に置きたいときは、mx-auto + max-w-* を使いましょう。

---

テクニック2: テキストや見出しを中央寄せする

テキストや見出しを中央に揃えたいとき、text-center を使います。

読者Bさんの誤解

1. カードを中央に寄せたい
2. 公式ドキュメントの Text Align ページを開く
   https://tailwindcss.com/docs/text-align
3. 「text-center → 中央揃え」と書いてある
4. 「これだ！」とカードに text-center を付けてみる
5. …テキストは中央になったけど、カード自体は左寄せのまま
6. 「あれ？中央揃えって書いてあるのに…」

コード例

NG: カード自体を中央に寄せたいのに text-center

<div class="bg-slate-700 p-8">
  <div class="max-w-md text-center bg-white rounded-lg shadow p-6">
    <h2 class="font-bold text-lg">カードタイトル</h2>
    <p class="text-gray-600 mt-2">カードの説明文がここに入ります。</p>
  </div>
</div>

OK: カードも中央、テキストも中央

<div class="bg-slate-700 p-8">
  <div class="mx-auto max-w-md text-center bg-white rounded-lg shadow p-6">
    <h2 class="font-bold text-lg">カードタイトル</h2>
    <p class="text-gray-600 mt-2">カードの説明文がここに入ります。</p>
  </div>
</div>

解説

text-center はテキストの配置を中央にするクラスです。ブロック要素（カード）自体の位置は変わりません。

カードを中央に置きたい場合は、テクニック1の mx-auto + max-w-* を使います。

ポイント

テキストや見出しを中央寄せしたいときは、text-center を使いましょう。

---

テクニック3: ボタンやアイコン群を中央に並べる

複数のボタンやアイコンを横並びで中央に配置したいとき、flex justify-center を使います。

読者Cさんの誤解

1. ボタンを中央に寄せたい
2. 公式ドキュメントの Justify Content ページを開く
   https://tailwindcss.com/docs/justify-content
3. 「justify-center → 中央に配置」と書いてある
4. ボタンの親要素に justify-center だけ付けてみる
5. …動かない
6. 「あれ？中央に配置って書いてあるのに…」

コード例

NG: justify-center だけ

<div class="bg-slate-700 p-8">
  <div class="justify-center">
    <button class="bg-blue-600 text-white px-4 py-2 rounded">ボタン1</button>
    <button class="bg-gray-200 text-gray-800 px-4 py-2 rounded">ボタン2</button>
  </div>
</div>

OK: flex justify-center

<div class="bg-slate-700 p-8">
  <div class="flex justify-center gap-4">
    <button class="bg-blue-600 text-white px-4 py-2 rounded">ボタン1</button>
    <button class="bg-gray-200 text-gray-800 px-4 py-2 rounded">ボタン2</button>
  </div>
</div>

解説

justify-center は Flexbox の中で機能するクラスです。flex とセットで使わないと効きません。

ポイント

ボタンやアイコン群を中央に並べたいときは、flex justify-center を使いましょう。

---

まとめ

TailwindCSS 中央寄せのテクニックを3つ紹介しました。

場面	テクニック
カード・コンテナを中央に置く	mx-auto + max-w-*
テキスト・見出しを中央寄せ	text-center
ボタン・アイコン群を中央に並べる	flex justify-center

場面に応じて適切なクラスを使い分けてみてください。

他のトラブルも解決したい方へ

他のレイアウトトラブルも解決したい方は、30パターンをまとめた逆引きガイドをご覧ください。

TailwindCSS レイアウト逆引きガイド｜よくあるトラブル30選

TailwindCSS レイアウト 効かない原因と解決策を30パターンで網羅。Flexbox、Grid、position、サイズ指定など、カテゴリ別に整理した逆引きリストで、あなたの「効かない」をすぐ ...

続きを見る

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）