dev TailwindCSS

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

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

TailwindCSS 中央寄せが効かない状態と正しく中央寄せできた状態の比較

はじめに

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>
mx-autoだけではカードが横幅いっぱいに広がる

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とmax-w-mdでカードが中央に寄る

解説

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>
text-centerだけではカードは左寄せのまま

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>
mx-autoを追加してカードも中央に配置

解説

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>
justify-centerだけではボタンが左寄せのまま

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>
flexを追加してボタンが中央に並ぶ

解説

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

ポイント

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

まとめ

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

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

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

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

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

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

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

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

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

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

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

-dev, TailwindCSS