CSS autoについて

Question

ブロック要素をコンテナの中央に寄せたい場合、よく
margin: 0 auto;
を使いますよね？
このautoってどういう意味があるんですか？他のサイトを参照しても本質的なことを書いているところがないので教えていただきたいです。

Answer 1

aacchanさんがどこまで深掘りした内容をご所望かわかりかねますが、一般的にはMDNに書いてあるとおりの理解で問題ないと思います。

margin - CSS: カスケーディングスタイルシート | MDN

auto
ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。

---

ちょっと補足

まず、margin: 0 auto;とはmargin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;の略記です。これはよいでしょうか。

margin に auto が指定されたときは、ブラウザが適切に計算して値を代入します。初期値は 0 なので何も指定しないと中央寄せされませんが、margin-left と margin-right に auto が指定されたときは、どちらも等しくなるように値が計算されて代入されます。そのため中央寄せで表示されるわけです。

margin: auto;とはブラウザに計算を任せます、という指定なわけです。

MDNには最新のHTML,CSS,JavaScriptのほぼ正確な情報が読みやすいかたちで載っていますので、調べ物をする際には当てにするとよいです。(日本語版で情報が欠けている場合は英語版を)

---

marginの計算について、より具体的なプロセスが知りたければW3Cの勧告書を読んでみてください。

Box model - 8.3 Margin properties | W3C CSS2 Editor's Draft
Visual formatting model details - 10.3 Calculating widths and margins | W3C CSS2 Editor's Draft

Answer 2

横幅を指定したときに親要素より横幅が小さければ、空いたスペースを左右均等に配置してくれます！
↓が参考になると思います！
http://ja.learnlayout.com/margin-auto.html

Comments

[aacchan]

結果でなくて、autoのもともとの意味からなぜそうなるかが知りたいです。

Answer 3

本質的な意味合いは、Google翻訳等で確認されると良いかと思います。

この場合「margin: 0 auto;」は、少し解釈が異なる部分もあります。
ブロック要素での幅（左右）でのauto指定は基本的に「最大値」を取ります。自動的に最大値を取るので「auto」になります。

「margin: 0 auto;」の「auto」の位置は左右の値なので「均等」を表します。よって均等になる最大値を取るので結果的に「中央寄せ」になります。