MENU
  1. ホーム
  2. CSS
  3. 【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策

【CSS】中央寄せする手法：上下左右・画像・効かない時の解決策

CSS
css-centering

CSSでの中央寄せは、要素の性質（インライン・ブロック）によって最適な手法が変わるため、多くの人がつまずきやすいポイントです。

本記事では、文字や箱の中央寄せ、Flexboxや絶対配置を駆使したレイアウト方法、実務で使えるコードをまとめて解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock
目次

CSSで中央寄せする2大手法

Web制作において、実務でも度々悩まされるのが中央寄せの実装です。

「中央に寄せたいだけなのに、なぜか左端から動かない…」といった経験は誰にでもあります。

CSSでの中央寄せが難しく感じる理由は、「文字（インライン要素）」を中央に寄せる方法と「箱（ブロック要素）」を中央に寄せる方法が異なるからです。

ここでは、基本となる「2大手法」、現場で発生するトラブルの解決策を解説します。

CSSで中央寄せする2大手法
  • 文字・インライン要素の中央寄せ
  • 箱・ブロック要素・全体の中央寄せ

文字・インライン要素の中央寄せ

文字の中央寄せやリンクなどの中央寄せを行う際に使うのがtext-align: center;です。

これは文字だけでなく、画像（<img>）や<span>などのインライン要素の中央寄せにも使用します。

また、日本語特有のレイアウトである縦書きの中央寄せを行う場合も、基本的にtext-align: center;が活躍します。

文字やインライン要素を中央に寄せたい場合は、「要素を囲んでいる親要素」に対してtext-align: center;を指定してください。

例えば、ボタン（<a>タグ）を中央に配置したいなら、外側を<div>などの親要素で囲み、その親に対して指定するのが正しい書き方です。

❌ 失敗：aタグ自身に指定しても動かない

ボタンを中央にしたい

⭕️ 正解：親要素に指定すると中央に寄る

ボタンを中央にしたい
/* ❌ インライン要素（aタグ）自体に指定してしまう */
.wrong-btn {
  text-align: center; /* 💡 意味がない */
}

/* ⭕️ 親要素（ブロック）に対して指定する */
.correct-parent {
  text-align: center; /* 💡 中にあるaタグが中央に移動する */
}
HTMLコード表示
<div class="center-text-wrapper">
  
  <p class="center-caption">❌ 失敗：aタグ自身に指定しても動かない</p>
  <div class="wrong-parent">
    <a href="#" class="wrong-btn">ボタンを中央にしたい</a>
  </div>

  <p class="center-caption" style="margin-top: 30px;">⭕️ 正解：親要素に指定すると中央に寄る</p>
  <div class="correct-parent">
    <a href="#" class="correct-btn">ボタンを中央にしたい</a>
  </div>

  <div class="center-code">
    /* ❌ インライン要素（aタグ）自体に指定してしまう */<br>
    <span class="hl-blue">.wrong-btn</span> {<br>
      <span class="hl-red">text-align: center;</span> /* 💡 意味がない */<br>
    }<br><br>

    /* ⭕️ 親要素（ブロック）に対して指定する */<br>
    <span class="hl-blue">.correct-parent</span> {<br>
      <span class="hl-red">text-align: center;</span> /* 💡 中にあるaタグが中央に移動する */<br>
    }<br>
  </div>

</div>
CSSコード表示
.center-text-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.center-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* 親要素（失敗例） */
.wrong-parent {
  background-color: #e9ecef;
  padding: 15px;
  border: 1px dashed #adb5bd;
}

/* ❌ aタグ自身に指定 */
.wrong-btn {
  display: inline-block;
  background-color: #dc3545;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  /* 💡 インライン要素自身へのtext-alignは無効 */
  text-align: center; 
}

/* 親要素（成功例） */
.correct-parent {
  background-color: #e9ecef;
  padding: 15px;
  border: 1px dashed #adb5bd;
  /* 💡 ⭕️ 親要素に指定する */
  text-align: center; 
}

/* ⭕️ ボタンのスタイルのみ */
.correct-btn {
  display: inline-block;
  background-color: #198754;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

.center-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }

ブロック要素であるdivタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾

箱・ブロック要素・全体の中央寄せ

文字ではなく、<div>や<section>などのブロック要素の中央寄せを行う手法がmargin: 0 auto;です。

全体の中央寄せを行うには、width（またはmax-width）の指定とmargin: 0 auto;をセットで記述することです。

実務でページ全体を中央に寄せる際は、max-width: 1000px;のように最大幅を決めた上でmargin: 0 auto;を指定するのが、レスポンシブにも対応したテクニックです。

❌ 失敗：幅を指定していないので中央に寄らない（全幅に広がる）

margin: 0 auto; だけを指定した箱

⭕️ 正解：幅（max-width）を指定すると左右の余白が自動計算される

幅(max-width) + margin: 0 auto; のセット
/* ❌ 幅がないと左右に余白を作れない */
.wrong-box {
  margin: 0 auto; /* 💡 横幅100%なので動かない */
}

/* ⭕️ 幅を決めてから余白をautoにする */
.correct-box {
  max-width: 300px; /* 💡 箱のサイズを決める */
  margin: 0 auto; /* 💡 左右の空きスペースを均等に割る */
}
HTMLコード表示
<div class="center-box-wrapper">
  
  <p class="center-caption">❌ 失敗：幅を指定していないので中央に寄らない（全幅に広がる）</p>
  <div class="box-wrong">
    margin: 0 auto; だけを指定した箱
  </div>

  <p class="center-caption" style="margin-top: 30px;">⭕️ 正解：幅（max-width）を指定すると左右の余白が自動計算される</p>
  <div class="box-correct">
    幅(max-width) + margin: 0 auto; のセット
  </div>

  <div class="center-code">
    /* ❌ 幅がないと左右に余白を作れない */<br>
    <span class="hl-blue">.wrong-box</span> {<br>
      <span class="hl-red">margin: 0 auto;</span> /* 💡 横幅100%なので動かない */<br>
    }<br><br>

    /* ⭕️ 幅を決めてから余白をautoにする */<br>
    <span class="hl-blue">.correct-box</span> {<br>
      <span class="hl-red">max-width: 300px;</span> /* 💡 箱のサイズを決める */<br>
      <span class="hl-red">margin: 0 auto;</span> /* 💡 左右の空きスペースを均等に割る */<br>
    }
  </div>

</div>
CSSコード表示
.center-box-wrapper {
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* ❌ 失敗例 */
.box-wrong {
  background-color: #dc3545;
  color: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  /* 💡 widthがないため全幅に広がり、margin autoが効かない */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

/* ⭕️ 成功例 */
.box-correct {
  background-color: #198754;
  color: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  /* 💡 幅の指定とセット */
  max-width: 300px;
  /* 💡 上下0、左右自動（中央寄せ）：省略で margin: 0 auto; でもOK */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

marginの使い方を詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

Flexboxで上下左右の中央寄せ

次に、Flexboxの中央寄せです。

Flexboxを使えば、たった数行のコードで、どんな要素でも中央へ配置することが可能です。

ここでは、Flexboxの機能について解説します。

Flexboxで上下左右の中央寄せ
  • display: flex;を使った横・縦・上下左右の中央配置
  • 親要素の中での子要素の配置

display: flex;を使った横・縦・上下左右の中央配置

要素を上下左右で中央寄せしたい場合、親要素に対してdisplay: flex;を指定し、横方向の中央寄せであるjustify-content: center;と縦方向の中央寄せであるalign-items: center;を組み合わせるのが現代のスタンダードです。

これにより、文字でも画像でもブロック要素でも、中身のサイズに関わらず中央寄せになります。

Flexboxを使って縦方向に中央寄せをする際は、「親要素に十分な高さが設定されているか」を確認してください。

全画面の中央に配置したい場合は、親要素にmin-height: 100vh;（画面の高さの100%）を指定するのがよいです。

❌ 失敗：高さがないため縦の中央寄せが効かない

動けない箱

⭕️ 正解：高さを指定すると上下左右のど真ん中に配置される

完璧な中央寄せ
/* ❌ 高さの指定を忘れている */
.wrong-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 💡 heightがないため縦に動けない */
}

/* ⭕️ 高さを確保して中央に寄せる */
.correct-container {
  display: flex;
  justify-content: center; /* 💡 左右の中央寄せ */
  align-items: center; /* 💡 上下の中央寄せ */
  height: 200px; /* 💡 動くための高さを確保する（必須） */
}
HTMLコード表示
<div class="flex-center-wrapper">
  
  <p class="flex-caption">❌ 失敗：高さがないため縦の中央寄せが効かない</p>
  <div class="flex-wrong">
    <div class="flex-child">動けない箱</div>
  </div>

  <p class="flex-caption" style="margin-top: 30px;">⭕️ 正解：高さを指定すると上下左右のど真ん中に配置される</p>
  <div class="flex-correct">
    <div class="flex-child">完璧な中央寄せ</div>
  </div>

  <div class="flex-code">
    /* ❌ 高さの指定を忘れている */<br>
    <span class="hl-blue">.wrong-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">justify-content: center;</span><br>
      <span class="hl-green">align-items: center;</span><br>
      <span class="hl-comment">/* 💡 heightがないため縦に動けない */</span><br>
    }<br><br>

    /* ⭕️ 高さを確保して中央に寄せる */<br>
    <span class="hl-blue">.correct-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">justify-content: center;</span> /* 💡 左右の中央寄せ */<br>
      <span class="hl-red">align-items: center;</span> /* 💡 上下の中央寄せ */<br>
      <span class="hl-red">height: 200px;</span> /* 💡 動くための高さを確保する（必須） */<br>
    }
  </div>

</div>
CSSコード表示
.flex-center-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.flex-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* ❌ 失敗例 */
.flex-wrong {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9ecef;
  border: 1px dashed #adb5bd;
  /* 💡 高さがない */
}

/* ⭕️ 成功例 */
.flex-correct {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 💡 高さをしっかり確保 */
  height: 200px; 
  background-color: #e9ecef;
  border: 1px dashed #adb5bd;
}

/* 共通の子要素 */
.flex-child {
  background-color: #0d6efd;
  color: #fff;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: bold;
}

.flex-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

Flexboxの使い方を詳しく知りたい人は「【CSS】flexの使い方：justify-content・align-items・gap」を一読ください。

【CSS】flexの使い方：justify-content・align-items・gap

親要素の中での子要素の配置

Flexboxが多用される理由は、単なる中央だけでなく、子要素の中央寄せのバリエーションが豊かだからです。

例えば、ヒーローヘッダー（トップ画像）の構成で、「テキストは中央に置きたいが、スクロールを促す矢印ボタンだけは中央の下寄せに配置したい」といった複雑な要望も叶えられます。

中央の下寄せを実現する場合、対象が1つの要素であれば、親要素にdisplay: flex;、justify-content: center;（左右中央）、align-items: flex-end;（下寄せ）を指定するのがよいです。

しかし、複数の要素があり、特定の1つだけを下部に押し込みたい場合は、押し込みたい子要素に対してmargin-top: auto;を指定するのがよいです。

これにより、上部の空きスペースを全てマージンが吸収し、要素が自動的に一番下へ張り付きます。

⭕️ 要素が1つの場合の下寄せ中央（align-items: flex-end;）

単一要素を下寄せ

⭕️ 複数の要素のうち、一部だけを下へ押し込む（margin-top: auto;）

タイトルテキスト

このテキストは上に配置されますが、下のボタンだけは一番下へ押し込まれます。

押し込まれたボタン
/* 💡 要素が1つの場合の下寄せ中央 */
.container-1 {
  display: flex;
  justify-content: center; /* 💡 左右中央 */
  align-items: flex-end; /* 💡 下寄せ */
  height: 200px;
}

/* 💡 特定の要素だけを下へ押し込む */
.container-2 {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center; /* 左右中央（縦並び時は役割が逆転する） */
  height: 250px;
}
.auto-margin-btn {
  margin-top: auto; /* 💡 上の空きスペースを全て吸収して一番下へ張り付く */
}
HTMLコード表示
<div class="flex-bottom-wrapper">
  
  <p class="flex-caption">⭕️ 要素が1つの場合の下寄せ中央（align-items: flex-end;）</p>
  <div class="flex-bottom-box1">
    <div class="flex-btn">単一要素を下寄せ</div>
  </div>

  <p class="flex-caption" style="margin-top: 30px;">⭕️ 複数の要素のうち、一部だけを下へ押し込む（margin-top: auto;）</p>
  <div class="flex-bottom-box2">
    <div class="flex-title">タイトルテキスト</div>
    <p class="flex-desc">このテキストは上に配置されますが、下のボタンだけは一番下へ押し込まれます。</p>
    <div class="flex-btn auto-margin">押し込まれたボタン</div>
  </div>

  <div class="flex-code">
    /* 💡 要素が1つの場合の下寄せ中央 */<br>
    <span class="hl-blue">.container-1</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">justify-content: center;</span> /* 💡 左右中央 */<br>
      <span class="hl-red">align-items: flex-end;</span> /* 💡 下寄せ */<br>
      <span class="hl-green">height: 200px;</span><br>
    }<br><br>

    /* 💡 特定の要素だけを下へ押し込む */<br>
    <span class="hl-blue">.container-2</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">flex-direction: column;</span> /* 縦並び */<br>
      <span class="hl-green">align-items: center;</span> /* 左右中央（縦並び時は役割が逆転する） */<br>
      <span class="hl-green">height: 250px;</span><br>
    }<br>
    <span class="hl-blue">.auto-margin-btn</span> {<br>
      <span class="hl-red">margin-top: auto;</span> /* 💡 上の空きスペースを全て吸収して一番下へ張り付く */<br>
    }
  </div>

</div>
CSSコード表示
.flex-bottom-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* パターン1：単独での下寄せ中央 */
.flex-bottom-box1 {
  display: flex;
  /* 左右中央 */
  justify-content: center; 
  /* 下寄せ */
  align-items: flex-end; 
  height: 150px;
  background-color: #e9ecef;
  border: 1px solid #adb5bd;
  border-radius: 8px;
  padding-bottom: 20px; /* 一番下からの余白 */
}

/* パターン2：複数要素での押し込み */
.flex-bottom-box2 {
  display: flex;
  /* 縦並びにする */
  flex-direction: column; 
  /* 縦並びの場合、align-itemsが左右の制御になる */
  align-items: center; 
  height: 250px;
  background-color: #e9ecef;
  border: 1px solid #adb5bd;
  border-radius: 8px;
  padding: 20px;
}

.flex-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}
.flex-desc {
  margin: 0;
  font-size: 14px;
  color: #666;
  text-align: center;
}

/* 共通ボタンデザイン */
.flex-btn {
  background-color: #dc3545;
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
}

.auto-margin {
  /* 上の空きスペースを自動計算して全て吸収する */
  margin-top: auto; 
}

.flex-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}

positionとtransformによる中央寄せ

Flexboxの登場により、Webデザインにおける中央寄せは簡単になりました。

しかし、すべての場面でFlexboxが使えるわけではありません。

例えば、「画像の上に再生ボタンを重ねたい」「画面全体を覆うポップアップを表示したい」といった場合、他の要素のレイアウトに影響を与えずに要素を浮かせるpositionによる中央 寄せの技術が必須になります。

ここでは、絶対配置とtransformの中央寄せを組み合わせたもう一つの中央寄せテクニックを解説します。

positionとtransformによる中央寄せ
  • position: absoluteを使った画面中央の配置
  • Flexboxが使えない場面でのdivの上下中央寄せ

position: absoluteを使った画面中央の配置

要素を親要素の中央に配置したい場合、top: 50%;とleft: 50%;を指定して中心へ移動させるのが基本です。

ズレを修正するために欠かせないのがtransform: translate(-50%, -50%);です。

translateでパーセンテージを指定すると、親要素ではなく「自身の幅と高さ」を基準にして移動します。

つまり、「左上に50%引っ張り戻す」ことで、アンカーが要素の中心へと補正され、中央配置が完成します。

また、基準となる親要素にposition: relative;を書き忘れて画面外へ飛んでいく事故も多いため、セットで指定しましょう。

❌ topとleftだけ（右下にズレる）

左上が中心

⭕️ transformで引っ張り戻す

完璧な中心
/* ❌ 左上が中心に来てしまう */
.wrong-box {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 💡 これだけだと自分のサイズの分だけ右下にズレる */
}

/* ⭕️ 自分のサイズの半分だけ上・左に戻す */
.correct-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 💡 補正コード */
}
HTMLコード表示
<div class="pos-sec1-wrapper">

  <div class="pos-demo-flex">
    <div class="pos-box-container">
      <p class="pos-caption">❌ topとleftだけ（右下にズレる）</p>
      <div class="pos-parent">
        <div class="pos-child-wrong">
          <div class="pos-dot"></div>
          左上が中心
        </div>
        <div class="pos-guide-x"></div>
        <div class="pos-guide-y"></div>
      </div>
    </div>

    <div class="pos-box-container">
      <p class="pos-caption" style="color:#198754;">⭕️ transformで引っ張り戻す</p>
      <div class="pos-parent">
        <div class="pos-child-correct">
          <div class="pos-dot"></div>
          完璧な中心
        </div>
        <div class="pos-guide-x"></div>
        <div class="pos-guide-y"></div>
      </div>
    </div>
  </div>

  <div class="pos-code">
    /* ❌ 左上が中心に来てしまう */<br>
    <span class="hl-blue">.wrong-box</span> {<br>
      <span class="hl-red">position: absolute;</span><br>
      <span class="hl-red">top: 50%;</span><br>
      <span class="hl-red">left: 50%;</span><br>
      <span class="hl-comment">/* 💡 これだけだと自分のサイズの分だけ右下にズレる */</span><br>
    }<br><br>

    /* ⭕️ 自分のサイズの半分だけ上・左に戻す */<br>
    <span class="hl-blue">.correct-box</span> {<br>
      <span class="hl-red">position: absolute;</span><br>
      <span class="hl-red">top: 50%;</span><br>
      <span class="hl-red">left: 50%;</span><br>
      <span class="hl-red">transform: translate(-50%, -50%);</span> /* 💡 補正コード */<br>
    }
  </div>

</div>
CSSコード表示
.pos-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.pos-demo-flex {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .pos-demo-flex {
    flex-direction: column;
  }
}

.pos-box-container {
  flex: 1;
}

.pos-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #dc3545;
}

/* 基準となる親要素 */
.pos-parent {
  position: relative;
  height: 200px;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
}

/* ❌ 失敗例の子要素 */
.pos-child-wrong {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: rgba(220, 53, 69, 0.8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* ⭕️ 成功例の子要素 */
.pos-child-correct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: rgba(25, 135, 84, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* 視覚的なアンカー（点） */
.pos-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: #ffc107;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.pos-child-correct .pos-dot {
  top: 50%;
  left: 50%;
}

/* ガイドライン（十字線） */
.pos-guide-x {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #adb5bd;
  border-top: 1px dashed #6c757d;
}

.pos-guide-y {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: #adb5bd;
  border-left: 1px dashed #6c757d;
}

.pos-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

positionプロパティの使い方を詳しく知りたい人は「【html&css】positionの使い方とabsolute・fixed・relativeの使い分け」を一読ください。

【html&css】positionの使い方とabsolute・fixed・relativeの使い分け

Flexboxが使えない場面でのdivの上下中央寄せ

「中央寄せなら全部Flexboxでいいのでは？」と思うかもしれません。

しかし、実務ではFlexboxを使うと他のレイアウトが崩壊してしまう場面が多々あります。

例えば、通常通りにテキストやボタンが並んでいるカードレイアウトの上に、覆い被さるように「SOLD OUT」というdivタグの中央寄せを配置したい場合です。

もし親カードにdisplay: flex;を指定して中央寄せすると、カード内のテキストやボタンまでFlexboxの影響を受け、横並びになったり形が崩れます。

既存のレイアウトを邪魔せずに特定のdivだけを対象要素の中央に配置したい場合は、親要素にposition: relative;を指定し、浮かせるdivに対してposition: absolute;とtransform: translate(-50%, -50%);を使用してください。

この手法であれば、重なり順（z-index）や背景の半透明化（rgba）と組み合わせることで、リッチなUIを実装できます。

💡 カードのレイアウトを保ったまま、上の層に「SOLD OUT」を中央配置する

Shoes
限定スニーカー

¥15,000

SOLD OUT
/* 💡 親要素（カード本体） */
.card {
  position: relative; /* 💡 絶対配置の基準にする */
  overflow: hidden;
}

/* 💡 重ねるフィルター（黒い半透明） */
.overlay {
  position: absolute; /* 💡 浮かせる */
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
}

/* 💡 フィルターの中のテキストを上下左右中央へ */
.sold-out-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 💡 ど真ん中へ補正 */
}
HTMLコード表示
<div class="pos-sec2-wrapper">
  
  <p class="pos-caption">💡 カードのレイアウトを保ったまま、上の層に「SOLD OUT」を中央配置する</p>

  <div class="pos-card">
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=400&q=80" alt="Shoes" class="pos-card-img">
    <div class="pos-card-body">
      <div class="pos-card-title">限定スニーカー</div>
      <p class="pos-card-price">¥15,000</p>
    </div>

    <div class="pos-overlay">
      <div class="pos-sold-out">SOLD OUT</div>
    </div>
  </div>

  <div class="pos-code">
    /* 💡 親要素（カード本体） */<br>
    <span class="hl-blue">.card</span> {<br>
      <span class="hl-red">position: relative;</span> /* 💡 絶対配置の基準にする */<br>
      <span class="hl-green">overflow: hidden;</span><br>
    }<br><br>

    /* 💡 重ねるフィルター（黒い半透明） */<br>
    <span class="hl-blue">.overlay</span> {<br>
      <span class="hl-red">position: absolute;</span> /* 💡 浮かせる */<br>
      <span class="hl-green">top: 0; left: 0; width: 100%; height: 100%;</span><br>
      <span class="hl-green">background-color: rgba(0,0,0,0.5);</span><br>
    }<br><br>

    /* 💡 フィルターの中のテキストを上下左右中央へ */<br>
    <span class="hl-blue">.sold-out-text</span> {<br>
      <span class="hl-red">position: absolute;</span><br>
      <span class="hl-red">top: 50%;</span><br>
      <span class="hl-red">left: 50%;</span><br>
      <span class="hl-red">transform: translate(-50%, -50%);</span> /* 💡 ど真ん中へ補正 */<br>
    }
  </div>

</div>
CSSコード表示
.pos-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 💡 親カード */
.pos-card {
  position: relative; /* 絶対配置の基準 */
  width: 250px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  overflow: hidden;
}

.pos-card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.pos-card-body {
  padding: 15px;
  text-align: center;
}

.pos-card-title {
  margin: 0 0 5px 0;
  font-size: 16px;
  color: #333;
}

.pos-card-price {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #dc3545;
}

/* 💡 重ねるフィルター層 */
.pos-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
}

/* 💡 ど真ん中に配置するdiv */
.pos-sold-out {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #dc3545;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  border-radius: 4px;
  transform-origin: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
}

.pos-code {
  width: 100%;
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

要素・タグ別：画像・リスト・表・ボタンの中央寄せ

CSSでの中央寄せは、対象となるHTMLタグが「インライン要素」なのか「ブロック要素」なのか、あるいは表やリストといった特殊な性質を持つ要素なのかによってアプローチが変わります。

「画像が中央にいかない」「リストの点だけが取り残された」といったトラブルは、タグごとの特性を把握していないために起こります。

ここでは、実務で頻出するUIパーツごとの中央寄せの方法を具体的なサンプルコードと合わせて解説します。

要素・タグ別：画像・リスト・表・ボタンの中央寄せ
  • 画像の中央寄せとレスポンシブ対応
  • リストやボタン・フォームの配置
  • テーブル全体とセルの中央寄せ
  • 見出しのデザインと左揃えのまま全体を中央寄せ

画像の中央寄せとレスポンシブ対応

Webサイトのメインビジュアルや記事内の挿絵など、画像の中央寄せはよく使うスタイリングの一つです。

画像はテキストと同じ「インライン要素」です。

そのため、基本的には親要素にtext-align: center;を指定すれば中央に寄りますが、レスポンシブデザインの観点からは別のベストプラクティスが存在します。

実務において、画像を中央に寄せる安全な方法は、画像自身をdisplay: block;に変換した上でmargin: 0 auto;を指定することです。

これにmax-width: 100%;とheight: auto;を組み合わせることで、スマホ画面でもはみ出さずに比率を保ったまま縮小されるレスポンシブ画像が完成します。

❌ 失敗：インライン要素のまま margin を指定しても動かない

失敗例

⭕️ 正解：ブロック要素に変更してから margin: 0 auto; を指定する

成功例
/* ❌ ブロック要素にしていない */
.wrong-img {
  margin: 0 auto; /* 💡 インライン要素なので無視される */
}

/* ⭕️ display: block とセットで使う */
.correct-img {
  display: block; /* 💡 ブロック要素に変換 */
  margin-right: auto;
  margin-left: auto;
  max-width: 100%; /* 💡 スマホではみ出さないための保険 */
  height: auto;
}
HTMLコード表示
<div class="elem-img-wrapper">
  
  <p class="elem-caption">❌ 失敗：インライン要素のまま margin を指定しても動かない</p>
  <div class="img-box-wrong">
    <img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&w=300&q=80" alt="失敗例" class="wrong-img">
  </div>

  <p class="elem-caption" style="margin-top: 30px;">⭕️ 正解：ブロック要素に変更してから margin: 0 auto; を指定する</p>
  <div class="img-box-correct">
    <img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&w=300&q=80" alt="成功例" class="correct-img">
  </div>

  <div class="elem-code">
    /* ❌ ブロック要素にしていない */<br>
    <span class="hl-blue">.wrong-img</span> {<br>
      <span class="hl-red">margin: 0 auto;</span> /* 💡 インライン要素なので無視される */<br>
    }<br><br>

    /* ⭕️ display: block とセットで使う */<br>
    <span class="hl-blue">.correct-img</span> {<br>
      <span class="hl-red">display: block;</span> /* 💡 ブロック要素に変換 */<br>
      <span class="hl-red">margin-right: auto;</span><br>
      <span class="hl-red">margin-left: auto;</span><br>
      <span class="hl-green">max-width: 100%;</span> /* 💡 スマホではみ出さないための保険 */<br>
      <span class="hl-green">height: auto;</span><br>
    }
  </div>

</div>
CSSコード表示
.elem-img-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.elem-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}
.img-box-wrong, .img-box-correct {
  background-color: #e9ecef;
  padding: 10px;
  border: 1px dashed #adb5bd;
}

/* ❌ 失敗例 */
.wrong-img {
  width: 150px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  border-radius: 8px;
}

/* ⭕️ 成功例 */
.correct-img {
  width: 150px;
  display: block;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.elem-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }

画像で利用するimgタグの使い方を詳しく知りたい人は「【HTML】imgタグの使い方：src・altの使い分けや画像リサイズ・中央寄せ」を一読ください。

【HTML】imgタグの使い方：src・altの使い分けや画像リサイズ・中央寄せ

リストやボタン・フォームの配置

リストの中央寄せやコンバージョンに直結するボタンの中央寄せ、フォーム中央寄せの配置はサイトの使いやすさを左右するポイントです。

フォームの入力欄やボタンは、要素にdisplay: inline-block;を指定した上で、親要素にtext-align: center;をかけるのが確実です。

一方、リストやフォームの枠そのものを中央に寄せる場合は、<ul>や<form>に対してwidth（または fit-content）を指定し、margin: 0 auto;で箱ごと中央に移動させるのがよいです。

これにより、中身の左揃えを保ったまままとまりとして中央に配置できます。

⭕️ 親要素のtext-alignと、子要素のinline-blockの組み合わせ

/* 💡 親要素：中身をすべて中央に揃える */
.ui-parent {
  text-align: center;
}

/* 💡 フォーム部品とボタン：横並び＆中央寄せに対応させる */
.ui-input, .ui-btn {
  display: inline-block; /* 💡 ブロック要素の幅と、インラインの配置を両立 */
  vertical-align: middle; /* 💡 高さのズレを補正する */
}
HTMLコード表示
<div class="elem-ui-wrapper">
  
  <p class="elem-caption">⭕️ 親要素のtext-alignと、子要素のinline-blockの組み合わせ</p>
  
  <div class="ui-parent">
    <input type="text" placeholder="メールアドレス" class="ui-input">
    <button class="ui-btn">送信する</button>
  </div>

  <div class="elem-code">
    /* 💡 親要素：中身をすべて中央に揃える */<br>
    <span class="hl-blue">.ui-parent</span> {<br>
      <span class="hl-red">text-align: center;</span><br>
    }<br><br>

    /* 💡 フォーム部品とボタン：横並び＆中央寄せに対応させる */<br>
    <span class="hl-blue">.ui-input, .ui-btn</span> {<br>
      <span class="hl-red">display: inline-block;</span> /* 💡 ブロック要素の幅と、インラインの配置を両立 */<br>
      <span class="hl-green">vertical-align: middle;</span> /* 💡 高さのズレを補正する */<br>
    }
  </div>

</div>
CSSコード表示
.elem-ui-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* 親要素で中央寄せ */
.ui-parent {
  background-color: #e9ecef;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #ced4da;
  text-align: center;
}

/* フォームとボタンの共通設定 */
.ui-input, .ui-btn {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 4px;
}

.ui-input {
  border: 1px solid #ccc;
  width: 200px;
  max-width: 100%;
}

.ui-btn {
  background-color: #0d6efd;
  color: #fff;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

リスト・ボタン・フォームといった各タグの使い方を詳しく知りたい人は以下を一読ください。

テーブル全体とセルの中央寄せ

料金表や会社概要など、テーブルの中央寄せを行う際、「テーブルそのものを画面の中央に配置すること」と「セルの文字を中央に揃えること」の2つを混同してしまう人がいます。

<table>タグは、<div>と同じブロックレベル要素のように振る舞います。

テーブル全体を画面中央に寄せるにはmargin: 0 auto;を使用します。

セルの文字（<td>や<th>）を中央に配置するには、text-align: center;とvertical-align: middle;をセットで指定してください。

⭕️ margin: 0 auto; でテーブル本体を中央配置

プラン 料金
ベーシック 無料
/* 💡 テーブル本体を画面の中央へ */
table {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

/* 💡 セルの中の文字を上下左右の中央へ */
th, td {
  text-align: center; /* 左右中央 */
  vertical-align: middle; /* 上下中央 */
}
HTMLコード表示
<div class="elem-table-wrapper">
  
  <p class="elem-caption">⭕️ margin: 0 auto; でテーブル本体を中央配置</p>

  <table class="center-table">
    <tr>
      <th>プラン</th>
      <th>料金</th>
    </tr>
    <tr>
      <td>ベーシック</td>
      <td>無料</td>
    </tr>
  </table>

  <div class="elem-code">
    /* 💡 テーブル本体を画面の中央へ */<br>
    <span class="hl-blue">table</span> {<br>
      <span class="hl-red">margin-top: 0;</span><br>
      <span class="hl-red">margin-right: auto;</span><br>
      <span class="hl-red">margin-bottom: 0;</span><br>
      <span class="hl-red">margin-left: auto;</span><br>
    }<br><br>

    /* 💡 セルの中の文字を上下左右の中央へ */<br>
    <span class="hl-blue">th, td</span> {<br>
      <span class="hl-red">text-align: center;</span> /* 左右中央 */<br>
      <span class="hl-red">vertical-align: middle;</span> /* 上下中央 */<br>
    }
  </div>

</div>
CSSコード表示
.elem-table-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.center-table {
  /* 💡 テーブル本体の中央寄せ */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  
  width: 80%;
  max-width: 300px;
  border-collapse: collapse;
  background-color: #fff;
}

.center-table th, .center-table td {
  border: 1px solid #dee2e6;
  padding: 15px;
  /* 💡 セル内の文字を上下左右中央へ */
  text-align: center;
  vertical-align: middle;
}

.center-table th {
  background-color: #0d6efd;
  color: white;
}

tableタグの使い方あるいはテーブルの作り方を詳しく知りたい人は「【HTML】tableタグ（テーブル）の使い方：枠線・セル結合・レスポンシブ」を一読ください。

【HTML】tableタグ（テーブル）の使い方：枠線・セル結合・レスポンシブ

見出しのデザインと左揃えのまま全体を中央寄せ

見出しの中央寄せを行う際、タイトルとサブタイトルが複数行になるデザインでは問題が発生します。

「画面の中央に配置したいけれど、文字自体は左端で揃っていてほしい」という要望です。

「まとまりとしては中央に置き、中身は左揃えにする」場合、中身を囲むラッパー要素にdisplay: inline-block;とtext-align: left;を指定し、外側の親要素にtext-align: center;を指定するという二重構造（入れ子）のテクニックを使います。

inline-blockは「中身の文字の長さに合わせて自分の幅を最小限に縮める」性質があるため、左揃えを維持したまま、まとまりとして画面の中央へ移動します。

❌ 単純な中央寄せ（左側がガタガタで読みにくい）

ABOUT US

私たちはWeb制作会社です。
最新のCSSを駆使して、
美しいサイトを構築します。

⭕️ 左揃えのまま中央寄せ（左端が揃って美しい）

ABOUT US

私たちはWeb制作会社です。
最新のCSSを駆使して、
美しいサイトを構築します。

/* 💡 外側の親：内側の塊（inline-block）を中央に寄せる */
.outer-wrapper {
  text-align: center;
}

/* 💡 内側のまとまり：中身に合わせて幅を縮め、文字は左に揃える */
.inner-wrapper {
  display: inline-block; /* 💡 まとまりにする */
  text-align: left; /* 💡 左揃えにリセット */
}
HTMLコード表示
<div class="elem-left-center-wrapper">
  
  <p class="elem-caption">❌ 単純な中央寄せ（左側がガタガタで読みにくい）</p>
  <div class="wrapper-wrong">
    <div>ABOUT US</div>
    <p>私たちはWeb制作会社です。<br>最新のCSSを駆使して、<br>美しいサイトを構築します。</p>
  </div>

  <p class="elem-caption" style="margin-top: 30px;">⭕️ 左揃えのまま中央寄せ（左端が揃って美しい）</p>
  <div class="wrapper-correct-outer">
    <div class="wrapper-correct-inner">
      <div>ABOUT US</div>
      <p>私たちはWeb制作会社です。<br>最新のCSSを駆使して、<br>美しいサイトを構築します。</p>
    </div>
  </div>

  <div class="elem-code">
    /* 💡 外側の親：内側の塊（inline-block）を中央に寄せる */<br>
    <span class="hl-blue">.outer-wrapper</span> {<br>
      <span class="hl-red">text-align: center;</span><br>
    }<br><br>

    /* 💡 内側のまとまり：中身に合わせて幅を縮め、文字は左に揃える */<br>
    <span class="hl-blue">.inner-wrapper</span> {<br>
      <span class="hl-red">display: inline-block;</span> /* 💡 まとまりにする */<br>
      <span class="hl-red">text-align: left;</span> /* 💡 左揃えにリセット */<br>
    }
  </div>

</div>
CSSコード表示
.elem-left-center-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* ❌ 単純な中央寄せ */
.wrapper-wrong {
  background-color: #e9ecef;
  padding: 20px;
  border: 1px dashed #adb5bd;
  /* 💡 文字の左端がバラバラになる */
  text-align: center; 
}
.wrapper-wrong h2, .wrapper-correct-inner h2 { margin-top: 0; color: #333; }
.wrapper-wrong p, .wrapper-correct-inner p { margin-bottom: 0; color: #666; line-height: 1.6; }

/* ⭕️ 外側の親要素 */
.wrapper-correct-outer {
  background-color: #d1e7dd;
  padding: 20px;
  border: 1px solid #198754;
  border-radius: 4px;
  /* 💡 内側の inline-block を中央へ移動させる */
  text-align: center; 
}

/* ⭕️ 内側の塊 */
.wrapper-correct-inner {
  /* 💡 塊にする（幅を中身に合わせる） */
  display: inline-block; 
  /* 💡 左揃えにリセットする */
  text-align: left; 
}

見出しタグの使い方を詳しく知りたい人は「【html】見出しタグの使い方：h1~h6の使い分けとデザイン例」を一読ください。

【html】見出しタグの使い方：h1~h6の使い分けとデザイン例

中央寄せができない！効かない時の原因とチェックリスト

Web制作の学習中や実務において、「中央寄せできない」と検索して頭を抱える瞬間は誰にでも訪れます。

コードをいくら見直しても動かない場合、CSSの文法ミスではなく「要素の性質」や「親要素のスペース」を勘違いしていることがほとんどです。

ここでは、中央寄せが効かない時の2大原因である「要素の違いによる指定ミス」と「上下中央・テーブル特有の仕様」について、チェックリストと解決策を解説します。

効かない時の原因とチェックリスト
  • text-alignやmargin: 0 autoが効かない理由
  • 上下中央寄せやテーブルの中央寄せができない時の対策

text-alignやmargin: 0 autoが効かない理由

中央寄せの基本であるtext-align: center;とmargin: 0 auto;ですが、これらが効かない原因は指定する対象を間違えていることです。

中央寄せが効かない時は、ブラウザのデベロッパーツールを開き、対象の要素が「インライン」なのか「ブロック」なのかを確認してください。

  • 文字や画像を中央にしたい場合
    それらを囲む「親要素（ブロック）」にtext-align: center;を指定する。
  • 箱自体を中央にしたい場合
    箱にwidth（またはmax-width）を指定した上でmargin: 0 auto;を指定する。

❌ 失敗：インライン要素に margin: 0 auto;

動かないテキスト

⭕️ 正解：ブロック要素に幅を指定して margin: 0 auto;

中央に寄る箱
/* ❌ インライン要素（spanなど）には効かない */
.wrong-inline {
  margin-right: auto;
  margin-left: auto;
  /* 💡 display: block; が無いため無視される */
}

/* ⭕️ ブロック要素にして幅を指定する */
.correct-block {
  display: block;
  width: 200px; /* 💡 幅の指定が必須 */
  margin-right: auto;
  margin-left: auto;
}
HTMLコード表示
<div class="chk-sec1-wrapper">

  <div class="chk-box-container">
    <p class="chk-caption">❌ 失敗：インライン要素に margin: 0 auto;</p>
    <div class="chk-parent">
      <span class="chk-inline-wrong">動かないテキスト</span>
    </div>
  </div>

  <div class="chk-box-container" style="margin-top: 30px;">
    <p class="chk-caption" style="color:#198754;">⭕️ 正解：ブロック要素に幅を指定して margin: 0 auto;</p>
    <div class="chk-parent">
      <div class="chk-block-correct">中央に寄る箱</div>
    </div>
  </div>

  <div class="chk-code">
    /* ❌ インライン要素（spanなど）には効かない */<br>
    <span class="hl-blue">.wrong-inline</span> {<br>
      <span class="hl-red">margin-right: auto;</span><br>
      <span class="hl-red">margin-left: auto;</span><br>
      <span class="hl-comment">/* 💡 display: block; が無いため無視される */</span><br>
    }<br><br>

    /* ⭕️ ブロック要素にして幅を指定する */<br>
    <span class="hl-blue">.correct-block</span> {<br>
      <span class="hl-green">display: block;</span><br>
      <span class="hl-green">width: 200px;</span> /* 💡 幅の指定が必須 */<br>
      <span class="hl-red">margin-right: auto;</span><br>
      <span class="hl-red">margin-left: auto;</span><br>
    }
  </div>

</div>
CSSコード表示
.chk-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.chk-box-container {
  margin-bottom: 20px;
}

.chk-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #dc3545;
}

.chk-parent {
  background-color: #e9ecef;
  padding: 15px;
  border: 1px dashed #adb5bd;
}

/* ❌ 失敗例 */
.chk-inline-wrong {
  background-color: #dc3545;
  color: white;
  padding: 10px;
  /* 💡 インライン要素へのmargin:autoは無効 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

/* ⭕️ 成功例 */
.chk-block-correct {
  background-color: #198754;
  color: white;
  padding: 10px;
  text-align: center;
  /* 💡 幅を指定し、ブロック要素としてmarginを効かせる */
  display: block;
  width: 200px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

.chk-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

.hl-comment {
  color: #6c757d;
  font-style: italic;
}

上下中央寄せやテーブルの中央寄せができない時の対策

横方向だけでなく、「上下の中央寄せができない」や「テーブルの中央寄せができない」といった特定のレイアウト時に発生するトラブルも実務では頻発します。

上下の中央寄せができない時は、デベロッパーツールで親要素を選択し、「親要素に十分な高さが確保されているか」を視覚的に確認してください。

高さがない場合はmin-height: 200px;やmin-height: 100vh;などを指定して動けるスペースを作ります。

テーブルの中央寄せができない時は、「テーブル本体の移動」と「セルの中の文字の移動」を分けて考えるのがよいです。

本体はmargin、中の文字はtext-alignとvertical-alignで制御します。

❌ 上下中央寄せができない（親に高さがない）

動けない

⭕️ 上下中央寄せ（親に高さを確保する）

完璧な中央

⭕️ テーブル本体の中央寄せ（margin: 0 auto;）

セル内の文字
/* 💡 上下中央寄せ：高さを確保しないと動けない */
.flex-container {
  display: flex;
  align-items: center;
  min-height: 150px; /* 💡 必須：動くスペースを作る */
}

/* 💡 テーブルの中央寄せ：text-alignではなくmarginを使う */
table {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}
HTMLコード表示
<div class="chk-sec2-wrapper">

  <p class="chk-caption">❌ 上下中央寄せができない（親に高さがない）</p>
  <div class="chk-flex-wrong">
    <div class="chk-flex-item">動けない</div>
  </div>

  <p class="chk-caption" style="margin-top: 20px; color:#198754;">⭕️ 上下中央寄せ（親に高さを確保する）</p>
  <div class="chk-flex-correct">
    <div class="chk-flex-item">完璧な中央</div>
  </div>

  <p class="chk-caption" style="margin-top: 40px; color:#198754;">⭕️ テーブル本体の中央寄せ（margin: 0 auto;）</p>
  <table class="chk-table-correct">
    <tr>
      <td>セル内の文字</td>
    </tr>
  </table>

  <div class="chk-code">
    /* 💡 上下中央寄せ：高さを確保しないと動けない */<br>
    <span class="hl-blue">.flex-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">align-items: center;</span><br>
      <span class="hl-red">min-height: 150px;</span> /* 💡 必須：動くスペースを作る */<br>
    }<br><br>

    /* 💡 テーブルの中央寄せ：text-alignではなくmarginを使う */<br>
    <span class="hl-blue">table</span> {<br>
      <span class="hl-red">margin-top: 0;</span><br>
      <span class="hl-red">margin-right: auto;</span><br>
      <span class="hl-red">margin-bottom: 0;</span><br>
      <span class="hl-red">margin-left: auto;</span><br>
    }
  </div>

</div>
CSSコード表示
.chk-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* ❌ 上下中央の失敗（高さがない） */
.chk-flex-wrong {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  border: 1px dashed #dc3545;
  /* 💡 heightがないため、子要素の高さに依存してしまう */
}

/* ⭕️ 上下中央の成功（高さがある） */
.chk-flex-correct {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  border: 1px dashed #198754;
  /* 💡 高さを確保する */
  min-height: 100px;
}

.chk-flex-item {
  background-color: #0d6efd;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 4px;
}

/* ⭕️ テーブルの正しい中央寄せ */
.chk-table-correct {
  /* 💡 ブロック要素として中央へ寄せる */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  
  width: 200px;
  border-collapse: collapse;
  background-color: #fff;
}

.chk-table-correct td {
  border: 1px solid #dee2e6;
  padding: 15px;
  /* 💡 セル内の文字を中央へ */
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}

WordPressでの中央寄せ

WordPressを使ってWebサイトを構築・運用している場合、純粋なHTML/CSSとは異なるアプローチが必要になることがあります。

WordPressには便利なブロックエディタが標準搭載されており、ボタン一つで中央寄せができる反面、テーマ独自の仕様やエディタが出力するHTML構造と自作CSSが衝突し、「中央に寄らない」「意図しない場所まで中央に寄った」というトラブルが頻発します。

WordPressでの中央寄せ
  • WordPressエディタやテーマごとの中央寄せの注意点

WordPressエディタやテーマごとの中央寄せの注意点

現在主流の高機能なWordPressテーマを使用している場合、テーマ側のデフォルトCSSが強力に設計されているため、力技で解決しようとしてレイアウトを破壊します。

WordPressでの中央寄せは、第一に「ブロックエディタの標準機能（配置オプションメニュー）」を使うのがよいです。

それでも独自のデザインを適用するため、どうしても自作する必要がある場合は、エディタの右側メニューから対象のブロックに追加CSSクラスを付与し、クラス名に対してのみCSSを当てるようにしてください。

「スコープを絞る」という作法を守れば、他のブロックや過去の記事に影響を与えず確実に中央寄せを適用できます。

❌ 失敗：要素全体（タグ）に指定して他のブロックまで巻き込む

普通の左寄せにしたいテキストまで…

中央にしたい箱

強制的に中央に寄ってしまう大事故。

⭕️ 正解：「追加CSSクラス」を利用して特定の部分だけを狙い撃つ

普通のテキストは左寄せのまま安全に維持され…

狙った箱だけが中央に寄る

全体の美しいレイアウトが保たれます。

/* ❌ タグ全体に !important をかけて全壊させる */
div {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ⭕️ WordPressの「追加CSSクラス」機能を使う */
.is-custom-center {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  width: fit-content; /* 💡 箱の幅を中身に合わせて最小化し、中央に寄せる */
}
HTMLコード表示
<div class="wp-center-wrapper">
  
  <p class="wp-caption">❌ 失敗：要素全体（タグ）に指定して他のブロックまで巻き込む</p>
  <div class="wp-editor-wrong">
    <p class="wp-normal-text">普通の左寄せにしたいテキストまで...</p>
    <div class="wp-target-box">中央にしたい箱</div>
    <p class="wp-normal-text">強制的に中央に寄ってしまう大事故。</p>
  </div>

  <p class="wp-caption" style="margin-top: 30px; color:#198754;">⭕️ 正解：「追加CSSクラス」を利用して特定の部分だけを狙い撃つ</p>
  <div class="wp-editor-correct">
    <p class="wp-normal-text">普通のテキストは左寄せのまま安全に維持され...</p>
    <div class="wp-target-box is-custom-center">狙った箱だけが中央に寄る</div>
    <p class="wp-normal-text">全体の美しいレイアウトが保たれます。</p>
  </div>

  <div class="wp-code">
    /* ❌ タグ全体に !important をかけて全壊させる */<br>
    <span class="hl-blue">div</span> {<br>
      <span class="hl-red">margin-left: auto !important;</span><br>
      <span class="hl-red">margin-right: auto !important;</span><br>
    }<br><br>

    /* ⭕️ WordPressの「追加CSSクラス」機能を使う */<br>
    <span class="hl-blue">.is-custom-center</span> {<br>
      <span class="hl-red">margin-top: 0;</span><br>
      <span class="hl-red">margin-right: auto;</span><br>
      <span class="hl-red">margin-bottom: 0;</span><br>
      <span class="hl-red">margin-left: auto;</span><br>
      <span class="hl-red">width: fit-content;</span> /* 💡 箱の幅を中身に合わせて最小化し、中央に寄せる */<br>
    }
  </div>

</div>
CSSコード表示
.wp-center-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.wp-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #dc3545;
}

/* 擬似的なWordPressエディタ画面 */
.wp-editor-wrong, .wp-editor-correct {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* ❌ 失敗例（親や全体の都合で全部中央に寄ってしまった状態を再現） */
.wp-editor-wrong {
  text-align: center; 
}

.wp-editor-wrong .wp-target-box {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

/* ⭕️ 成功例（左寄せベース） */
.wp-editor-correct {
  text-align: left;
}

/* 通常のテキスト（段落ブロックの想定） */
.wp-normal-text {
  color: #666;
  margin-bottom: 10px;
  font-size: 14px;
}

/* 対象の箱（カスタムブロックの想定） */
.wp-target-box {
  background-color: #0d6efd;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  width: fit-content;
  margin-bottom: 10px;
}

/* 💡 追加CSSクラスを付与したものだけを安全に中央へ */
.wp-editor-correct .is-custom-center {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

.wp-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 文字・インライン要素は親のブロック要素にtext-align: center;を指定する。
  • 箱・ブロック要素は要素自身に幅（widthやmax-width）を設定し、margin: 0 auto;を指定する。
  • 上下左右の中央配置は親要素に十分な高さを確保し、display: flex; justify-content: center; align-items: center;を指定する。
  • 特定の要素だけを下寄せする場合、Flexbox環境下で対象の子要素にmargin-top: auto;を指定する。
  • 絶対配置での中央配置はtop: 50%; left: 50%;に加え、transform: translate(-50%, -50%);で中心位置のズレを補正する。
  • 画像の中央寄せはインライン要素のままではmarginが効かないため、display: block;に変換してからmargin: 0 auto;を指定する。
  • テーブルの表全体の中央寄せはmargin: 0 auto;、セル内の文字の中央寄せはtext-align: center;とvertical-align: middle;を使い分ける。
  • 左揃えのまま中央配置は親要素にtext-align: center;、中身を囲う子要素にdisplay: inline-block;とtext-align: left;を指定して二重構造にする。
  • 中央寄せが効かない時の確認事項は対象がインラインかブロックか、親要素に動くための高さがあるかを確認する。
  • WordPressでの注意点はレイアウト崩壊を防ぐため、!importantは避け、エディタ標準機能か追加CSSクラスを利用して局所的に指定する。

よくある質問（FAQ）

margin: 0 auto;を指定したのに中央寄せになりません。

最も多い原因は「横幅（widthまたはmax-width）を指定していない」か「インライン要素に指定している」ことです。

ブロック要素はデフォルトで横幅がいっぱいに広がるため、幅を制限してあげないと左右に余白を作るスペースが生まれません。

また、<span>や<img>などのインライン要素にはmargin: 0 auto;は無効なため、対象がブロック要素であるか（またはdisplay: block;を追記しているか）を確認してください。

text-align: center;を書いたのに文字やボタンが真ん中にいきません。

「中央に寄せたい要素そのもの」に指定してしまっているのが原因です。

text-align: center;は、「その箱の中に入っている文字やインライン要素を中央に揃える」というプロパティです。

中央に寄せたい<a>タグや<span>タグ自身に指定するのではなく、それらを囲んでいる外側の親要素（<div>や<p>など）に対して指定するのがよいです。

縦方向にも中央寄せするにはどうすればいいですか？

CSSではFlexboxを使うのが簡単で確実です。

親要素に対してdisplay: flex; justify-content: center; align-items: center;を指定するだけで、上下左右の中央に配置されます。

ただし、親要素に十分な高さが設定されていないと縦方向に動くスペースがないため中央に寄らないので注意してください。

画像を中央寄せする一番良い方法は何ですか？

画像をブロック要素に変換してから余白を計算させるのが最も使われる方法です。

画像に対してdisplay: block; margin: 0 auto;を指定してください。

親要素にtext-align: center;をかける方法もありますが、ブロック要素化する方法であればmax-width: 100%; height: auto;と組み合わせることでスマホ対応も同時に完結するため安全です。

他のレイアウトに重ねて、特定の箱だけをど真ん中に浮かせて配置したいです。

position: absolute;とtransformの組み合わせ（絶対配置）が最適です。

基準となる親要素にposition: relative;を指定し、中央に置きたい子要素にposition: absolute; top: 50%; left: 50%;を指定します。

これだけだと要素の左上が中心に来てズレてしまうため、最後にtransform: translate(-50%, -50%);を追記して中心位置を補正します。

これで他の要素を邪魔せずに中心に配置できます。

CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次