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