多くの試みと検索の後、私はCSS2でそれを行う満足のいく方法を見つけたことはありません。あらかじめ幅を知らないとコンテンツブロックを中心にします
簡単な方法は、以下のサンプルに示すように、便利な<table>にラップすることです。テーブルのレイアウトを避け、気まぐれなやり方を避ける方法を知っていますか？
table {
margin: 0 auto;
}<table>
<tr>
<td>test<br/>test</td>
</tr>
</table>私が知りたいのは、固定幅ずにそれを行う方法であり、また、ブロックされて。
@Jason、うん、<center>作品。良い時代。でも、私は、次のことを提案します：
body {
text-align: center;
}
.my-centered-content {
margin: 0 auto; /* Centering */
display: inline;
}<div class="my-centered-content">
<p>test</p>
<p>test</p>
</div>EDIT @Santiは、ブロックレベル要素は、親コンテナの幅を記入します、それが効果的にwidth:100%となりますので、テキストが左に流れ、無駄なマークアップと非集中要素が残されます。 display: inline-block;を試してみるとよいでしょう。 Firefoxは文句を言うかもしれないが、it's right。また、.my-centered-content DIVのCSSにborder: solid red 1px;を追加して試してみてください。
display：Firefoxではinline-blockがうまく動作しましたが、IEではwidthを100％ –
これはlamest答えになるだろうが、それは動作します：
Use the deprecated <center> tag。
：P
私はそれが不自由だと言った。しかし、私が言ったように、それは動作します！
*身震い*
<テーブル>の代わりに<div>を使用した場合、あなたの例も同様に機能すると思います。唯一の違いは、<テーブル>のテキストも中央揃えであることです。それも必要なら、text-align：centerを追加してください。ルール。
さらに、<div>は、使用可能なすべての水平スペースを埋めることに注意してください。開始点と終了点がわからない場合は、境界線を置いてください。
次は十分です。 位置、および自動
<div style="border: 1px solid black;
width: 300px;
height: 300px;">
<div style="width: 150px;
height: 150px;
background-color: blue;
position: relative;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;">
</div>
</div>
NOTEの使用を注意してください。それはIEで動作するかどうかわかりません。
#wrapper {
width: 100%;
border: 1px solid #333;
}
#content {
width: 200px;
background: #0f0;
}<div id="wrapper" align="center">
<div id="content" align="left"> Content Here </div>
</div>、次のことができます。
これは最も意味的な理にかなってどんな要素を使用する利点を（適切であれば、より良い何かをDIVを置き換え）が<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>
、しかし、それがIE（grr ...）で失敗する欠点
それ以外は、幅を設定せずに、あなたの最善の策はjavasc左端を正確に配置するためのript。私はあなたがそれを「奇妙なトリック」として分類するかどうか分からない。
本当にあなたがやりたいことに依存します。あなたの単純なテストケースを考えると、text-align：centerを持つdivはまったく同じ効果を持ちます。
私のお気に入りは質問で提案されたテーブルメソッドです！私は間違っているかもしれませんが、他の部門の内部にdivを入れ子にしているときはJoeの解決策は機能しません。 – Kyle