i-f – Web Works –

margin: 0 auto;が効かない4つの原因と直し方｜上から順に確認

  • 2024年7月12日
  • 2026年9月23日
  • CSS
CSS

margin: 0 auto; を書いたのに中央に寄らない。

スポンサーリンク

原因は、ほぼ次の4つのどれかです。

上から順に確認してください。1つずつ潰していけば、必ず原因にたどり着きます。

それでも見つからないときのために、検証ツールで特定する手順も最後に書きました。

  1. 原因1　widthが指定されていない
  2. 原因2　インライン要素になっている
  3. 原因3　floatが効いている
  4. 原因4　position: absolute / fixed が効いている
  5. 見つからないときの、検証ツールでの調べ方
目次

原因1：widthが指定されていない。


「margin: 0 auto;」は、ブロックレベル要素（例えばdiv）を水平方向に中央揃えするためのシンプルな方法です。

以下は、使用例です。

div {
  width: 50%;       /* 要素の幅を設定 */
  margin: 0 auto;   /* 上下のマージンを0、左右は自動調整 */
}


これにより、divは親要素の中で水平方向に中央に配置されます。

widthを指定することが必要で、margin: 0 auto;はその幅を元に左右の余白を自動的に調整します。

ブロック要素なので、すでに横幅いっぱいまで要素が広がっています。

要素を中央に揃えたい場合は、必ず幅（width）を指定してあげましょう。

スポンサーリンク

原因2：インライン要素になっている。

使用例を見てもらいましたが、幅を指定しても「margin: 0 auto;」が期待通りに動作しないことがあります。

そんなときは、以下の2つの原因が考えられます。

spanやaタグには効きません。

インライン要素（例えばspan）にmargin: 0 auto;を適用しても、効果がありません。

インライン要素は、中央揃えに対応していないからです。

解決方法: displayプロパティをblockに変更することで、中央揃えを適用できます。

「margin: 0 auto;」は、万能ではありません。注意しましょう。

See the Pen margin: 0 auto;ブロック要素にしか適用されない。 by 1buk1 (@1buk1) on CodePen.

スポンサーリンク

原因3・4：floatとposition: absolute。

widthもdisplayも問題なければ、次はこの2つを疑ってください。

  • float が効いている。floatを使うと要素が左右どちらかに寄るため、左右のautoが意味を持ちません。float: none; に戻してください。
  • position: absolute; または fixed が効いている。通常の配置から外れるので、中央に寄せるなら left: 50%; と transform: translateX(-50%); を使います。

やっかいなのは、自分で書いた覚えがなくても効いていることがある点です。クラス名が他のCSSとかぶっていたり、リセットCSSやテーマ側で指定されていたりします。

特にサイトの更新作業など、作業してから時間が空いたり、他人が作ったサイトをいじるときなどは、本件に遭遇しやすいです。

焦らず適用されているプロパティを確認してみましょう。

スポンサーリンク

原因が見つからないときは、検証ツールで特定します。

4つとも確認したのに直らない。そういうときは、CSSを目で追うより検証ツールを使ったほうが早いです。

  1. 中央に寄らない要素を右クリックして「検証」を開く。
  2. 右側の「Computed」タブを開く。
  3. display、width、float、position の4つを見る。

Computedは、複数のCSSがぶつかった結果最終的に効いている値を表示します。自分が書いたCSSではなく、実際にブラウザが適用している値です。

ここで width が auto のままなら原因1、display が inline なら原因2、という具合に一発で分かります。

値の右側に出ているファイル名をクリックすれば、どのCSSの何行目で指定されているかまで飛べます。身に覚えのない指定を見つけるには、これがいちばん確実です。

他人が作ったサイトの更新や、時間が空いた案件の修正では、まずここを見てください。

他の方法で中央揃えを実現する

対象の要素をブロック要素にしなくても要素を中央に配置する方法はいくつかあります。

以下の方法で、さらに柔軟に中央揃えを行うことができます。

フレックスボックスを使った中央揃え

フレックスボックスを使えば、簡単に要素を中央揃えにできます。

HTMLの記述は少し増えますが、簡単に中央揃えにできるのでおすすめです。

See the Pen Untitled by 1buk1 (@1buk1) on CodePen.

さらに、フレックスボックスを使った方法であれば、インライン要素も中央揃えにすることができます。

CSSグリッドを使った中央揃え

同じように、グリッドレイアウトを使う方法でも中央揃えにすることができます。

See the Pen 【grid】インライン要素を中央揃えにする。 by 1buk1 (@1buk1) on CodePen.

text-align: center;を使った中央揃え。

text-align: center;を使っても、中央揃えにすることができます。

See the Pen text-alignで中央揃えにする方法。 by 1buk1 (@1buk1) on CodePen.

ただ、この方法の注意点としては、適用させた親要素の子要素全てにtext-align: center;が適用されてしまいます。

また、要素だけでなく、テキストも中央揃えになるため、テキストを左揃えにしたい場合には向きません。

実際に使ってみる: 中央揃えの応用

それでは、実際に使ってみましょう！

以下の例では、中央揃えを使用して、簡単なレイアウトを作成します。

See the Pen 【flex】中央揃えの具体的な例。 by 1buk1 (@1buk1) on CodePen.

.contentは画面の中央に配置され、縦横両方の中央揃えになっています。

私が遭遇した事例（HTMLの構築とtext-align: center;で中央揃えにしてみる。）

ここからは、私が遭遇した事例から。

<h2 class="title">
 <span class="title-name">ここにタイトルが入ります。</span>
</h2>
.title:before {
    content: '';
    display: block;
    width: 69px;
    height: 30px;
    margin: 0 0 10px;
    background: url(../img/common/icon.png) no-repeat center center;
    background-size: 100% auto;
}

.title .title-name {
    display: block;
    font-size: 28px;
    font-size: 2.8rem;
    font-weight: 400;
    letter-spacing: .1em;
    line-height: 1.5;
}

h2を親要素として、中にspanが入っている要素です。
さらに、h2に擬似要素を適用させることで、画像（アイコン）を表示させています。

この要素をページ上に表示させると、幅いっぱいにh2が広がり、テキストとアイコンが左側に表示されるかたちになります。

上記の要素を中央寄せにしていきます。

h2の要素に幅を指定して、margin: 0 auto;を適用する。

前述した条件を考えれば、この方法が一番簡単で早い方法です。

ですが、そう甘くはありません。

まず、この方法だとテキストの長さによって、デザインが担保できない可能性があります。テキストが長くなると、折り返しが発生してしまいます。

タイトルテキストが明確になったあとに、widthを指定してもいいのですが、タイトルごと個別にwidthを指定するのは、あまり好ましくありません。（というか、面倒です・・・）

なので、widthを指定してmargin: 0 auto;という単純な解決方法では、だめそうです。
常に汎用性の高い記述を考えていかなくてはなりません。

HTML要素を追加してtext-align: center;を適用させる。

<div class="title_wrap">
  <h2 class="title">
    <span class="title-name">ここにタイトルが入ります。</span>
  </h2>
</div>

私は、以下のようにして今回の事例を対処しました。

.title_wrap {
   text-align: center;
}
.title_wrap .title {
  display: inline-block;
}
.title:before {
    content: '';
    display: block;
    width: 69px;
    height: 30px;
    margin: 0 0 10px;
    background: url(../img/common/icon.png) no-repeat center center;
    background-size: 100% auto;
}

.title .title-name {
    display: block;
    font-size: 28px;
    font-size: 2.8rem;
    font-weight: 400;
    letter-spacing: .1em;
    line-height: 1.5;
}

対処した内容は、至ってシンプルです。

まず、「.title」タグを「.title_wrap」で囲ってあげます。
「.title_wrap」には、text-align: center;を適用させます。

text-align: center;は、inline要素もしくは、inline-block要素を中央寄せにします。注意点としては、中央寄せにしたい要素の親要素に適用させなければならないということです。そのため、今回は「.title_wrap」を新たに記述しました。

そのあと、「.title」をdisplay: inline-block;にします。

inline要素ではなく、inline-block要素なのは、inline要素になると、marginだけでなく、paddingまで適用されなくなってしまうためです。また、inline要素になると、HTMLの記述の影響を受け、予期せぬ余白や、改行がうまれます。そのため、「inline-block要素」としました。

これで、「.title_wrap」（親要素）に適当させたtext-align: center;が適用されて、「.title」（子要素）が中央寄せになります。

上記の対応方法であれば、テキストへ幅を個別に指定する必要もなく、テキストの長さが変わっても問題ありません。汎用性の高い記述で、中央寄せにすることができました。

前述した方法でも可能だったかもしれませんが、私が遭遇した事例では「text-align: center;」を使って解決してみました。

まとめ

「margin: 0 auto;」はCSSで中央揃えを行う非常にシンプルで強力な方法ですが、適用できる要素や条件に注意が必要です。

幅を指定し、適切なdisplayプロパティを使うことで、簡単に中央揃えが可能です。

また、フレックスボックスやCSSグリッドなど、より柔軟で強力な方法も覚えておくと、デザインの幅が広がります。

中央揃えをうまく使いこなすためには、各方法の特性を理解し、シチュエーションに応じて最適な方法を選択するようにしましょう。

そのためには、実践あるのみです！デモサイトでもいいので、コードを書きまくりましょう。

スポンサーリンク
スポンサーリンク