HTMLでインラインレベル要素をセンタリングしたい場合、「text-align:center」と記述すればセンタリングされますが、
ブロックレベル要素をセンタリングしたい場合は、「text-align:center」ではセンタリングされません。

これは、「text-alignプロパティ」がインラインレベル要素に対してのスタイルを定義するものだからです。

う～んこまった、ブロックレベルの要素をセンタリングしたいぞ

こんなときは、親要素に対しての左右のmarginでセンタリングを行うようにします。

こんな感じ

1
2
3
4
5

<div style="width: 300px;">
    <div style="margin: 0px auto; width:20px; border:1px solid red;">
        ○
    </div>
</div>

 これでブロックレベル要素のセンタリングもOK

HTMLでブロックレベル要素となるタグは、

• p
• h1～h6
• div
• ul
• ol
• dl
• pre
• hr
• blockquote
• address
• fieldset
• table
• form
• script
• noscript
• ins
• del

があります。

XHTML 1.0 Strict DTDで、「body」の要素の次にはブロックレベル要素がこないといけないと定義されています。

なので、bodyタグの中には上記要素のいずれかが入ることになるのだ