IEでセンタリングできない時

ページ全体をセンタリングしたいとき、全体をdivで囲って、CSSで margin-left:auto; margin-right:auto; とか指示しますよね。
しかし、なぜかIE8にうまく適用できない時がありました。
そんなときは、全体を囲っているdivをさらにdivで囲ってこんなCSSを書くとうまくいきます。

＜HTML＞
<div id="wrapper">
<div id="contents">
<p>内容</p>
</div>
</div>


＜CSS＞
#wrapper { text-align:center; }

#contents{
width:500px;
margin-left:auto;
margin-right:auto;
background-color:#ffdff9;
text-align:left;
}

text-alignは本当はブロックレベル要素には効かないはずなんですが、IEには効くという不具合があるそうで、それを利用したものだそうですよ。

そんで、指示したtext-alignは子要素に影響するので、leftで戻しておくということです。

参考サイトはこちら：

http://www.dspt.net/stylesheet_css/001/ie_error2.html