もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

margin: 0 auto;が効かない場合、原因はほぼ「中央に寄せられる前提条件を満たしていない」ことです。margin: 0 auto;は、「親要素から子要素の横幅を引いた、左右の残りスペースを自動分配する」という挙動です。
つまり、この余白が存在しないと動きません。ここでは、margin: 0 auto;が効かない原因を解説します。

margin: 0 auto;のための前提条件

下記の条件を満たしていないとmargin: autoが効きません。

1. ブロックレベル要素であること
2. 100%以外でwidth が指定されていること
3. 親要素に横方向の余白があること

よくある原因

① width が 100% になっている場合

子要素の幅が横いっぱいで、余白が存在しないため中央に寄らない。

.child {
  width: 100%;
  margin: 0 auto;
}

解決方法

.child {
  width: 300px;
  margin: 0 auto;
}

② inline 要素に指定している場合

spanなどのinline要素には効きません。

span {
  margin: 0 auto; /* 無効 */
}

解決方法

span {
  display: block;
  width: 200px;
  margin: 0 auto;
}

③ Flexbox の子要素に使っている場合

Flexコンテナ内では意味・挙動が変わります。

.parent {
  display: flex;
}

この場合は

• 横方向中央 → justify-content: center
• 子だけ中央 → margin: 0 auto;（使えるが文脈依存）

※ flex-direction;によって意味・挙動が変わります。

④ position:absolute を使っている場合

position: absolute;にした要素には通常効きません。

.child {
  position: absolute;
  margin: 0 auto; /* 効かない */
}

⑤ float が指定されている場合

floatとauto marginは共存できません。

.child {
  float: left;
  margin: 0 auto; /* 無効 */
}

⑥ 親の幅が足りていない場合

親自体が子に合わせて縮むため余白がない。

.parent {
  display: inline-block;
}

⑦ Grid 内で誤用の場合

Gridでは、margin: auto;も使えるが設計意図として誤りです。

• 横中央 → justify-self: center;
• 全体中央 → place-items: center;

正常に効く最小例

<div class="parent">
  <div class="child">中央</div>
</div>

.parent {
  width: 100%;
}


.child {
  width: 300px;
  margin: 0 auto;
}

チェックリスト

• widthは100%になっていないか？
• displayはblockか？
• floatやabsoluteを使っていないか？
• 親に十分な幅があるか？
• Flex/Gridの文脈ではないか？

結論としては、margin: 0 auto;が効かない原因の9割は「余白が存在しない」または「ブロック要素でない」と言えるでしょう。上のチェックリストをご覧になって解決してみてください。