センター揃えにならない
まず、以下のような基本的な中央寄せの方法ができているか確認しましょう。
まず文字を中央寄せする場合、
style.css
p{
text-align:center;
}
次にボックスを中央寄せする場合、
style.css
div{
margin:0 auto 0 auto;
}
ボックスを中央寄せする場合、widthが正しく設定されていることと、要素がブロック要素になっていることが重要です。（spanなどのインライン要素はこの方法では中央寄せできません）
このページでは、主に後者のブロック要素を中央する場合について記述しています。
中央寄せを指定している要素が間違っている
例えば、以下のようにdivの中にpタグが入っているとします。
index.html
<div class="box"> <p>ダミーテキスト</p> </div>
この場合、divボックスごと中央寄せしたいのであれば、
style.css
p{
margin:0 auto 0 auto;
}
と指定しても、divの中でpタグが中央寄せされるだけであって、divは中央には寄りません。
style.css
div{
margin:0 auto 0 auto;
}
このように指定するのが正しいです。
横並びボタンなど複数の要素を均等に中央寄せしようとしている
バラバラの要素を均等にならべて中央に寄せることは基本的にはできません。
そういった場合、バラバラの要素を一つのボックス要素で囲ってグループ化し、その囲った一つの要素を中央に配置します。
つまり、囲ったボックス要素のmargin（左右）に対してautoを指定してやればよいのです。
グループ化した要素の幅がしっかり設定されていない
それでも中央寄せがうまくいかない場合、要素は中央寄せされているけど、要素の幅が画面いっぱいになっているせいで中央寄せの意味を成していない場合があります。
まとめ
ボックス要素を中央寄せするには、以下の点に注意しましょう。
- 中央寄せしたいボックスの中身ではなく、ボックスそのもののmarginにautoを指定しましょう
- 中央寄せしたいボックスのwidthが画面いっぱいになっていませんか？
- そもそもブロック要素ではなくインライン要素になっていませんか？
- 複数の要素を中央寄せする場合、それを囲ったボックスを中央寄せしましょう