text-align:centerとmargin: 0 auto の違い

テキストなどを中央寄せする際には主に上記の2つの手法があります。
しかしどういった場面で使い分けるのかしっかりと理解していないと苦労します。
そこで今回は中央寄せの手法の使い分けについて説明していきます。

まずtext-align:centerはインライン要素に対して使用します。
インライン要素とは例えばimgやaなどです。

注意点としては親要素をインライン要素にすると中央寄せすることができなくなる点です。
そのため親要素をdivなどのブロック要素にするのを忘れないようにしましょう。

次にmargin: 0 autoについて説明していきます。
これはブロック要素を中央寄せする際に使用します。
marginとはそもそも要素の外側の余白のことです。
autoを使用することで余白を自動で調節してくれ、結果とした中央寄せの状態になります。
そのため、ブロック要素を中央寄せするするにはmargin:0 autoと覚えておきましょう。

注意点としてはmargin: 0 auto を使用する際には必ずwidthを指定するのを忘れないことです。
なぜならブロック要素は特に指定がない限り親要素と全く同じ大きさになってしまうからです。