左右中央揃えが目的なら要らない場合が多い
恐らく皆さんがmargin: 0 auto;と記述する際、頭の中では「要素を左右中央に配置したい」と思っているのではないでしょうか？
ところがその目的であれば記事タイトルに書いたようにmargin: auto;で事足りる（場合が多い）のです。
まずは見た方が早いと思うので、下にmargin: 0 auto;とmargin: auto;を並べてみました。
See the Pen KKNNxjW by Keisuke Watanuki (@xrxoxcxox) on CodePen.
ウィンドウサイズを変えて見ていただければ分かると思いますがmargin: auto;でも問題なく左右の中央に配置されています。
なぜ？
margin: auto;はmargin: auto auto auto auto;と書いたのと同じになり、上下のmarginもauto扱いになります。
そのため、結果的に0を抜いても左右中央に配置されます。
参考までにMDN Web Docsにあるmarginの仕様のリンクを貼っておきます。
※ コメント欄で指摘していただいた通り、記載内容が間違っていたため修正しました。
逆に、0が必要な場面は？
正直そんなに浮かびませんでした。
割と無理矢理ひねり出すなら
- リセット系のCSSをあてておらず、ただの
divにもブラウザ固有のマージンがあたってしまう -
.someClass > div { margin-top: 24px; }などの指定があり、継承してしまうため0で上書きしないといけない
じゃあ0ってどこから来たの？
すみません、これが分かりませんでした。
先ほど紹介したMDN Web Docsの中でも以下のように記載があります。
最近のブラウザーで何かを中央揃えしたい場合は、 display: flex; justify-content: center; を使用することができます。
しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 margin: 0 auto; を使用してください。
当時のブラウザの問題だったのか、CSSの仕様が変わったのか……。
もしご存じの方がいたらコメントで教えていただけると幸いです 