CSS中央寄せまとめ｜上下左右中央・画像・テキスト・div別に解説 – devsakaso

CSSの中央寄せは、対象がテキストなのか、画像なのか、div なのか、上下左右の中央なのかで書き方が変わります。

この記事では、CSSでよく使う中央寄せを20パターンに分けてまとめます。text-align、margin: auto、flex、grid、absoluteを、コピーしやすい形で使い分けられるようにしています。

1. テキストを中央寄せする

テキストやインライン要素は、親要素に text-align: center; を指定します。

<p class="text-center">中央寄せのテキスト</p>

.text-center {
  text-align: center;
}

文章、リンク、span などを中央にしたいときの基本です。

2. インラインボタンを中央寄せする

a で作ったボタンなど、インライン要素は親で中央寄せします。

<div class="inline-button-center">
  <a href="#">詳しく見る</a>
</div>

.inline-button-center {
  text-align: center;
}

.inline-button-center a {
  display: inline-block;
  padding: 10px 18px;
  color: #fff;
  text-decoration: none;
  background: #2563eb;
  border-radius: 6px;
}

ボタンの装飾は CSSボタンデザイン集に分けて増やせます。

3. divを横方向に中央寄せする

幅があるブロック要素は、左右の margin を auto にします。

<div class="box-center">中央寄せの箱</div>

.box-center {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 24px;
  background: #f8fafc;
}

margin: 0 auto; は、中央寄せしたい要素に幅があるときに効きます。

4. 画像を中央寄せする

画像は初期状態ではインライン要素なので、ブロック化してから中央寄せします。

<img class="image-center" src="https://placehold.co/640x360" alt="">

.image-center {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

display: block; を忘れると、余白の見え方が期待とずれることがあります。

5. 複数のボタンを中央に並べる

ボタンが複数ある場合は、親にflexを指定して中央寄せします。

<div class="button-row-center">
  <a href="#">資料を見る</a>
  <a href="#">相談する</a>
</div>

.button-row-center {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.button-row-center a {
  padding: 10px 16px;
  color: #fff;
  text-decoration: none;
  background: #111827;
  border-radius: 6px;
}

justify-content: center; は、flexの主軸方向を中央寄せします。

6. flexで上下左右中央寄せする

要素を上下左右の中央に置きたい場合は、flexがよく使われます。

<div class="flex-center-box">
  <div>中央の要素</div>
</div>

.flex-center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  background: #f1f5f9;
}

上下中央にするには、親要素に高さが必要です。

7. flexで横だけ中央寄せする

横方向だけ中央にしたい場合は、justify-content を使います。

<div class="flex-x-center">
  <span>横中央</span>
</div>

.flex-x-center {
  display: flex;
  justify-content: center;
  padding: 24px;
  background: #f8fafc;
}

横並びの要素をまとめて中央に置きたいときに便利です。

8. flexで縦だけ中央寄せする

縦方向だけ中央にしたい場合は、align-items を使います。

<div class="flex-y-center">
  <span>縦中央</span>
</div>

.flex-y-center {
  display: flex;
  align-items: center;
  min-height: 180px;
  background: #f8fafc;
}

横方向は左寄せのまま、縦位置だけ整えたいときに使います。

9. gridで上下左右中央寄せする

要素が1つだけなら、Gridの place-items が短く書けます。

<div class="grid-center-box">
  <div>中央の要素</div>
</div>

.grid-center-box {
  display: grid;
  place-items: center;
  min-height: 240px;
  background: #f1f5f9;
}

place-items: center; は、縦横どちらも中央にします。

10. 画面の上下左右中央に置く

ログイン画面や空状態のメッセージなど、画面中央に置きたい場合の例です。

<main class="viewport-center">
  <div>ログインフォーム</div>
</main>

.viewport-center {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 24px;
}

100svh を使うと、スマホの表示領域に合わせやすくなります。

11. absoluteで上下左右中央寄せする

親要素の中で、子要素を絶対配置の中央に置く方法です。

<div class="absolute-center-parent">
  <div class="absolute-center-child">中央</div>
</div>

.absolute-center-parent {
  position: relative;
  min-height: 240px;
  background: #f8fafc;
}

.absolute-center-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

親には position: relative;、子には transform を指定します。

12. モーダルを画面中央に置く

固定表示のモーダルやダイアログを中央に置く例です。

<div class="modal-center">
  <div class="modal-box">モーダル内容</div>
</div>

.modal-center {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
}

.modal-box {
  width: min(100%, 420px);
  padding: 24px;
  background: #fff;
  border-radius: 8px;
}

inset: 0; で画面全体を覆い、Gridで中央に置きます。

13. アイコンを丸の中央に置く

丸いアイコンや数字バッジの中身を中央に置く方法です。

<span class="icon-center">i</span>

.icon-center {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  font-weight: 700;
  background: #2563eb;
  border-radius: 50%;
}

小さな正方形の中身は、inline-grid が簡単です。

14. カード内のテキストを中央寄せする

カードの中身を中央にまとめたい場合の例です。

<div class="card-content-center">
  <h3>タイトル</h3>
  <p>説明文が入ります。</p>
</div>

.card-content-center {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  background: #f8fafc;
  border-radius: 8px;
}

.card-content-center h3,
.card-content-center p {
  margin: 0;
}

中身が複数行ある場合は、text-align: center; も一緒に指定します。

15. ナビゲーションを中央寄せする

メニューを横並びで中央に置く場合の例です。

<nav class="nav-center">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</nav>

.nav-center {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.nav-center a {
  color: #111827;
  font-weight: 700;
  text-decoration: none;
}

ヘッダー全体の設計は、CSSヘッダーデザイン集と分けて扱えます。

16. リストを中央寄せする

タグやカテゴリの一覧を中央に並べる例です。

<ul class="list-center">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

.list-center {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0;
  list-style: none;
}

.list-center li {
  padding: 4px 10px;
  background: #f1f5f9;
  border-radius: 9999px;
}

リストデザイン自体は、CSSリストデザイン集に内部リンクできます。

17. 横幅いっぱいの中で最大幅を中央寄せする

ページ内のコンテンツ幅をそろえるときによく使う形です。

<section class="section-center">
  <div class="section-inner">本文が入ります</div>
</section>

.section-center {
  padding: 48px 20px;
  background: #f8fafc;
}

.section-inner {
  max-width: 960px;
  margin: 0 auto;
}

外側に左右の余白、内側に max-width と margin: auto を指定します。

18. inline-blockを中央寄せする

幅を内容に合わせたい箱は、親で中央寄せできます。

<div class="inline-box-center">
  <span>内容幅のラベル</span>
</div>

.inline-box-center {
  text-align: center;
}

.inline-box-center span {
  display: inline-block;
  padding: 8px 14px;
  background: #f1f5f9;
  border-radius: 9999px;
}

内容幅の要素は、無理に margin: auto ではなく text-align で中央にできます。

19. 古い方法のtable-cell中央寄せ

古いコードで見かけることがある、display: table-cell; の中央寄せです。

<div class="table-cell-center">
  <div>中央の要素</div>
</div>

.table-cell-center {
  display: table-cell;
  width: 320px;
  height: 180px;
  text-align: center;
  vertical-align: middle;
  background: #f8fafc;
}

現在はflexやgridで書く方が扱いやすいですが、既存コードの理解用に知っておくと便利です。

20. 中央寄せ用の共通クラスを作る

よく使う中央寄せは、共通クラスにしておくと再利用できます。

<div class="u-center-grid">
  <div>中央の要素</div>
</div>

.u-text-center {
  text-align: center;
}

.u-center-block {
  width: min(100%, 960px);
  margin-inline: auto;
}

.u-center-grid {
  display: grid;
  place-items: center;
}

ただし、共通クラスを増やしすぎると管理が難しくなるため、よく使うものだけにします。

中央寄せできない原因

テキストなのに、子要素へ text-align を指定している
margin: 0 auto; を使う要素に幅がない
上下中央にしたい親要素に高さがない
flexを親ではなく子要素に指定している
別のCSSで display や text-align が上書きされている

CSSが上書きされている場合は、CSSが効かない原因まとめを確認します。

使い分けの早見表

テキスト、リンク、インライン要素: text-align: center;
幅のあるdivやsection: margin: 0 auto;
画像: display: block; margin: 0 auto;
上下左右中央: flexまたはgrid
重ねた要素の中央: absolute + transform

まとめ

CSSの中央寄せは、「何を中央にしたいか」で使うプロパティが変わります。

テキストは text-align、幅のある箱は margin: auto、上下左右中央はflexまたはgrid、と覚えると迷いにくくなります。