【CSS】margin: 0 auto;が効かない理由と効かないときの対策と注意点。

CSSを使って要素を中央に配置する方法は、ウェブデザインにおいて非常に重要なテクニックのひとつです。

その中でも、「margin: 0 auto;」を使った方法は広く利用されています。

ここでは、その基本的な使い方から、初心者がつまずきやすいポイント、そして他の方法との比較を詳しく解説します。

ハマるとなかなか抜け出せないですが、原因を一度理解してしまえば、つまづくことがなくなりますので、原因と対策、注意事項をしっかりと覚えてしまいましょう。

基本的な使い方: 水平中央揃え

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

以下は、使用例です。

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

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

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

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

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

「margin: 0 auto;」が効かない場合の原因と解決法

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

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

displayがインライン要素の場合

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

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

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

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

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

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

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

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

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

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

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;」が効かないことがあります。

• floatプロパティが適用されている。
• position: absolute;が適用されている。

冒頭で記述した方法で要素の位置を指定できなかった場合には、上記２点の原因も探ってみてください。クラス名の被りなどで、意図しないプロパティが適用されていることもありますよ！

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

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

まとめ

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

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

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

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

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