margin: 0 auto;はどんな指定か
margin: 0 auto;は、要素を中央に寄せる時によく利用する指定方法です。
margin: 上下の余白 左右の余白;
の指定になります。上下の余白は必要な分指定しますが、左右の値を「auto」とすることで、左右の余白幅を自動で算出た中央寄りになります。
margin: 0 auto が効かない原因と対処
margin: 0 auto; を使いこなせていない原因には、margin: 0 auto; に関する基本的な部分を知らないことが考えられます。知っておくべきことを知れば、問題は解決するかと思います。
最低限知っておきたいことを説明します。
インラインレベルの要素には効かない
margin: 0 auto;はブロックレベルの要素にしか効きません。よってインラインレベルの要素にmargin: 0 auto;を指定しても効果がありません。
インラインレベルの要素は、上下の margin は指定しても効きませんが、左右の margin は効きます。なので margin: 0 auto; も効くように思うかも知れません。
そもそもインラインレベルの要素では、数値での指定はできても「auto」といったキーワードでの指定に効果がありません。このような挙動から、たとえ左右の指定だったとしても、インラインレベルの要素には margin: 0 auto; が効かないのです。
ページの構成では、a 要素やspan 要素などインラインレベルの要素は、p 要素や div 要素といったブロックレベルの要素で囲むことがほとんどだと思います。
margin: 0 auto; を指定することができる、ブロックレベルの要素の場合で知っておくべきことを説明します。
要素の横に余白がないと意味がない
pやdivといったブロックレベルの要素にmargin: 0 auto;を指定して、コンテンツを中央寄せで表示させたいとします。
ブロックレベルとは、要素の上下に改行が入る、1つのブロックとして扱う要素を指します。そしてその要素にwidth（横幅）を指定しないデフォルトの状態では、幅を横いっぱいに占有します。
margin: 0 auto;を指定する目的はコンテンツの中央寄せです。pやdivといったブロックレベルの要素にmargin: 0 auto;を指定して、中のコンテンツを中央寄せで表示させたいところです。
しかしブロックレベルの要素は、横幅を指定しない限り横いっぱいに幅を占有していますので、中のコンテンツは動きません。
横幅を狭めることで余白ができ、動く余裕ができます。そこでmargin: 0 auto;を指定することで中央に寄り、コンテンツも中央に寄った見た目となるのです。
display: block;、display: inline;の場合はどうか
displayプロパティでblock、inline、inline-blockを指定した場合はどうでしょうか。
ブロックレベルの要素にdisplay: inline;を指定して、インラインレベルの要素として扱うよう変更した場合、margin: 0 auto;は効かなくなります。また、display: inline-block;も同様に効きません。
インラインレベルの要素にdisplay: block;を指定してブロックレベルの要素とした場合は、margin: 0 auto;を指定することができるようになります。