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

css

いまいち違いがわからなかったので、メモを残します。

【text-alignだけ】

stylesheet.css

text-align: center;

h1が微妙に左側に傾いてる

【margin 0 autoもtext-alignも両方】

stylesheet.css

margin: 0 auto;
text-align: center;

文字が中心でさらに枠組み自体が真ん中になっている

【margin 0 autoだけ】

stylesheet.css

margin: 0 auto;

文字は左側だが枠は真ん中

【結論】

margin 0 autoは枠そのものを真ん中に寄せる
text-align centerは文字の位置を枠の中の中心に寄せる