CSSで要素を左右中央よせする方法

左右の中央寄せ

左右の中央寄せは「インライン要素」と「ブロック要素」で中央よせする方法が異なります。

インライン要素の左右中央寄せ

インライン要素の左右の中央寄せは、中央寄せしたいインライン要素の親要素（divなど)にtext-align:center;を指定すると中央寄せになります。

例

index.html

<div class="center">
 <span>あいうえお</span>
</div>

この場合は「あいうえお」を中央とせしたいので、class="center"にtext-align:center;を指定します

style.css

.center {
 text-align:center;
}

そのテキストが含まれているブロック要素に対してtext-align:center;を指定してあげると中央寄せにすることができます。

ブロック要素の中央寄せ

ブロック要素の左右の中央寄せは、ブロック要素の左右のmarginをautoにすることで中央寄せにすることができます。
左右のだけの中央寄せなのでmargin:0 auto;と指定します。

index.html

<div class="center">
 <span>あいうえお</span>
</div>

style.css

.center {
 margin:0 auto;
}

と指定します。
これでもいいのですが、この指定だと親要素は中央寄せになってくれますがその中の「あいうえお」は親要素に対して中央寄せになってくれません。
そこで先ほど説明したtext-align:center;も指定します。

style.css

.center {
 text-align:center;
 margin:0 auto;
}

このように指定すると、中央に寄せられた親要素の中でさらに左右中央に寄せることができます。

ここで注意したいのが、margin:0 auto;は指定した要素の親要素に対して中央寄せになることです。
中央寄せした要素の親要素が左寄せまたは右寄せになっていた場合はその分左または右に寄った状態となります。

画面の真ん中に表示したいけどできない時は、親要素も中央に寄せましょう。
それか、親要素の横幅をwidth:100%に指定する方法もあります。