みなさん、超おひさしぶりです。この所忙しかったり、ホケっとしてたり、気がついたら年月が過ぎていました。なんだかなー。
さて、今日の話題はボックスのセンタリングです。なんだよー。誰でも知ってるよー。と思われたらごめんなさい。でも、意外な落とし穴あったりしました。

#containerやら#layoutやら、いわゆるベースになる部分にfloat:leftが入るとmargin:0 auto;とtext-align:center;ではセンタリングされなくなる時があるのです。中身をfloatさせてる場合、IEなら勝手に親要素で囲ってくれますが、firefoxなどのモダンブラウザは囲ってくれません。子供をfloatさせるなら親もfloat。子供が蛙なら親も蛙。失礼。
しかし、それをやると前述したようにセンタリングが出来なくなります。なんでじゃっ！！firefoxが崩れてるとバグじゃないかもと思うfirefox信者です。
ですので、この場合は#containerの役割を分けてあげる必要があります。

body{
margin:0px auto;
text-align:center;
}

#base{
width:100%;
margin:0 auto;
text-align:center;
}

#container{
width:749px;
margin:0 auto;
text-align:center;
}

上記のように#baseを噛ませます。#containerにfloat:left;入ってないやんっ！ええ。そうなんです。ここにfloat入れると元の木阿弥です。入れないことでcontainerがfloatしている子要素を囲ってくれるのです。しかし、まったく理解出来ません。そして、こんな事で躓いてるのは私だけのようです。ググっても出てこないよー。それともググり方が悪いのかー。とほほ。

そして、ほんっっっとうに写真撮ってないので、とうとう猫です。かわいいのですが、大食漢で横暴で人に媚びるのが上手な、およそ猫とかけ離れたオカマです。