ブロックレベル要素をセンタリングするには「margin:0 auto;」

hoge

div要素のようなブロックレベル要素をセンタリングするには「text-align」ではなく
widthを％指定したうえで、「margin:0 auto;」がよろしいです。
「text-align」プロパティはインライン要素の位置揃えを指定するためのもの。

.main {  
    width: 100%;  ★
    border: 1px solid #000;  
}  
.main div   {  
    width: 80%;  ★
    border: 1px solid #FF0000;  
    margin: 0 auto;  ★
}