センタリング

通常、ブロック要素をセンタリングさせるには

1)横幅を指定
2)左右のmarginをauto

[css]
width:100px
margin:0 auto;
[/css]

するけど
横幅を指定しちゃうから、内容に合わせて横幅が伸縮するような要素をセンタリングさせられません。

けど、widthの代わりにdisplay:tableを使うと
横幅が変動する要素をセンタリングが可能にッ!!!

[css]
display:table;
margin:0 auto;
[/css]

display:table;はIE8も理解してくれます

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #f33;
}
.contentA{
width: 640px;
margin: 1em auto;
background: #fff;
padding: 1em;
}
.contentB{
background: #fff;
padding: 1em;
display: table;
margin: 1em auto;
}
</style>
</head>
<body>
<div class="contentA">
<p>いろはにほへと ちりぬるをわかよたれそ<br />つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせすん</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="contentB">
<p>いろはにほへと ちりぬるをわかよたれそ<br />つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせすん</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="contentB">
<p>いろはにほへと ちりぬるをわかよたれそ<br />つねならむうゐのおくやま<br />けふこえてあさきゆめみし ゑひもせすん</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
</body>
</html>
[/html]