divの幅が事前にわからないため、divブロックの「製品」を中央に配置しようとすると問題が発生します。誰かが解決策を持っていますか？

更新：私が抱えている問題は、表示する製品の数がわからないことです。1つ、2つ、または3つの製品を使用できます。親の幅がわかっているため、固定数の場合は中央に配置できます。 div、コンテンツが動的な場合の方法がわかりません。

.product_container {
  text-align: center;
  height: 150px;
}

.products {
  height: 140px;
  text-align: center;
  margin: 0 auto;
  clear: ccc both; 
}
.price {
  margin: 6px 2px;
  width: 137px;
  color: #666;
  font-size: 14pt;
  font-style: normal;
  border: 1px solid #CCC;
  background-color:	#EFEFEF;
}

<div class="product_container">
  <div class="products" id="products">
    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>   

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>
  </div>
</div>

2015年2月27日更新：私の元の回答は引き続き投票されていますが、現在では通常、代わりに@bobinceのアプローチを使用しています。

.child { /* This is the item to center... */
  display: inline-block;
}
.parent { /* ...and this is its parent container. */
  text-align: center;
}

歴史的な目的のための私の元の投稿：

このアプローチを試してみてください。

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"/>
</div>

一致するスタイルは次のとおりです。

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

JSFiddle

ここでの考え方は、中央に配置するコンテンツを2つのdiv、つまり外側のdivと内側のdivに含めることです。両方のdivをフロートさせ、コンテンツに合わせて幅が自動的に縮小されるようにします。次に、外側のdivをコンテナの中央の右端に相対的に配置します。最後に、内側のdivをそれ自体の幅の半分だけ反対方向に相対的に配置します（実際には外側のdivの幅ですが、それらは同じです）。最終的には、コンテンツが含まれているコンテナにコンテンツを集中させます。

あなたはありますが、「product_container」のサイズにあなたの「製品」内容の高さに依存している場合最後にその空のdivを必要としています。

'display：block'（divはデフォルト）の要素の幅は、コンテナの幅によって決まります。ブロックの幅をコンテンツの幅に依存させることはできません（縮小して合わせる）。

（CSS 2.1で「float：left / right」であるブロックを除いて、中央揃えには使用しません。）

'display'プロパティを 'inline-block'に設定して、ブロックをその親のtext-alignプロパティで制御できる縮小に合わせるオブジェクトに変えることができますが、ブラウザーのサポートは不安定です。もしそうしたいなら、たいていはハック（例えば-moz-inline-stackを参照）を使うことで回避できます。

他の方法はテーブルです。これは、幅を事前に知ることができない列がある場合に必要になることがあります。例のコードから何をしようとしているのか本当にわかりません。ここには、縮小してフィットするブロックが必要なことは明らかではありませんが、製品のリストはおそらく表形式と見なすことができます。

[PS。ウェブ上のフォントサイズに「pt」を使用しないでください。固定サイズのテキストが本当に必要な場合は、「px」の方が信頼性が高くなります。そうでない場合は、「％」などの相対単位の方が適しています。そして「明確：ccc both」—タイプミス？]

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

JSFiddle

ほとんどのブラウザはdisplay: table;CSSルールをサポートしています。これはtext-align: center;、含まれているdivの動的な幅を維持しながら、追加のHTMLを追加したり、コンテナーに制約スタイルを適用したりすることなく（コンテナー内の他のすべてのインラインコンテンツを中央に配置するのと同じように）、divをコンテナー内で中央に配置するのに適した方法です。

HTML：

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS：

.centered { display: table; margin: 0 auto; }

.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

アップデート（2015-03-09）：

今日これを行う適切な方法は、実際にはフレックスボックスルールを使用することです。ブラウザのサポートは少し制限されていますが（CSSテーブルのサポートとフレックスボックスのサポート）、このメソッドは他の多くのことも可能にし、このタイプの動作専用のCSSルールです。

HTML：

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
  background-color: green;
}
.centered {
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

その猫の皮を剥く6つの方法：

ボタン1：すべてのタイプdisplay: blockは、完全な親の幅を想定します。（floatまたは、display: flex親と組み合わせない限り）。そうだね。悪い例。

ボタン2：進むと、display: inline-block（全幅ではなく）自動幅になります。その後text-align: center 、ラッピングブロックを使用して中央に配置できます。おそらく「ヴィンテージ」ブラウザでも、最も簡単で、最も広く互換性があります...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

ボタン3： ラップの上に何も置く必要はありません。したがって、おそらくこれが最もエレガントなソリューションです。垂直方向にも動作します。（最近の翻訳のブラウザーサポートは十分（≥IE9）です...）。

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

ところで：（絶対配置に関連して）高さが不明なブロックを垂直方向に中央揃えするための優れた方法でもあります。

ボタン4： 絶対配置。ラッパーで十分な高さを確保するようにしてください。他の誰もしないためです（clearfixも暗黙的でもない...）

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

ボタン5： 浮動（ブロックレベルの要素も動的な幅にする）と相対的なシフト。野生ではこれを見たことがありませんが。おそらくデメリットがあります...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

更新： ボタン6： そして今日では、フレックスボックスを使用することもできます。スタイルは中央揃えされたオブジェクトのラッパーに適用されることに注意してください。

.wrapSix
  display: flex
  justify-content: center

→完全なソースコード（スタイラス構文）

floatとハックなclear：bothの両方を使用しないように「インラインブロック」を組み合わせて、よりエレガントなソリューションを見つけました。それはネストされたdiv thoを必要としますが、これは非常にセマンティックではありませんが、それだけで機能します...

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

それが役に立てば幸い！

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

ターゲット要素が完全に配置されている場合は、一方向に50％移動して（left: 50%）、反対方向に50％変形することで（）、中央に配置できますtransform:translateX(-50%)。これは、ターゲット要素の幅を定義せずに（またはを使用してwidth:auto）機能します。親要素の位置は、静的、絶対、相対、または固定にすることができます。

デフォルトでは、div要素はブロック要素として表示されるため、幅は100％であり、中央に配置しても意味がありません。Ariefで示唆したように、あなたは指定する必要がありますwidthし、あなたがして使用することができますauto指定するときにmarginセンタリングするためにdiv。

あるいは、を強制することもできますがdisplay: inline、のspan代わりにのように動作するものがあるdivため、あまり意味がありません。

これにより、順序付きリスト、順序なしリスト、または任意の要素などの要素が中央に配置されます。それをouterElementのクラスを持つDivでラップし、内側の要素にinnerElementのクラスを与えます。

outerelementクラスは、IE、古いMozilla、およびほとんどの新しいブラウザーに対応しています。

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
} 

justify-content：centerでcss3 flexboxを使用します。

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

マイク・M・リンの答えのわずかなバリエーション

にoverflow: auto;（またはhidden）を追加する場合div.product_container、は必要ありませんdiv.clear。

これはこの記事から派生した-> http://www.quirksmode.org/css/clearing.html

これが変更されたHTMLです。

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

そしてここに変更されたCSSがあります：

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

div.clear（空の要素を持つのは間違っていると感じることを除いて）なしの方が良い理由は、Firefoxの過度のマージン割り当てです。

たとえば、次のHTMLがあるとします。

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

次に、Firefox（執筆時点では8.0）では、前に11pxマージンが表示されます。さらに悪いことに、コンテンツが画面のサイズにうまく収まる場合でも、ページ全体に垂直スクロールバーが表示されます。 product_container

この新しいCSSとマークアップを試してください

これが変更されたHTMLです。

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

そしてここに変更されたCSSがあります：

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

".product_container"に "overflow：hidden"を指定しない場合、 "outer-center" divはその右側にある他の近くのコンテンツと重なります。「outer-center」の右側にあるリンクやボタンは機能しません。「outer-center」の背景色を試して、「overflow：hidden」の必要性を理解してください

興味深い解決策を見つけました。スライダーを作成していて、スライドコントロールを中央に配置する必要がありました。親に相対位置を追加し、子の位置を垂直に移動することもできます。見てくださいhttp://jsfiddle.net/bergb/6DvJz/

CSS：

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML：

<div id="parent">
    <div id="child">voila</div>
</div>

しdisplay:table;て設定marginするauto

コードの重要なビット：

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

取得した要素の数に関係なく、中央に自動的に配置されます

コードスニペットの例：

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}

<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>

幅を明示的に指定せずにこれを行う唯一の方法は、（ガスプ）テーブルを使用することです。

不安定な修正、しかしそれはうまくいきます...

CSS：

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

HTML：

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>

古いブラウザで機能する簡単な修正（ただし、テーブルを使用し、高さを設定する必要があります）：

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}

内部divの代わりにスパンを使用する

<div class="container_box">
   <span class="content">Hello</span>
</div>

この質問が古いことは知っていますが、私はそれに挑戦しています。bobinceの回答に非常に似ていますが、実際のコード例が含まれています。

各製品をインラインブロックにします。コンテナのコンテンツを中央揃えにします。できました。

http://jsfiddle.net/rgbk/6Z2Re/

<style>
.products{
    text-align:center;
}

.product{
    display:inline-block;
    text-align:left;

    background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
    background-size:25px;
    padding-left:25px;
    background-position:0 50%;
    background-repeat:no-repeat;
}

.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}
</style>


<div class="products">
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
</div>

参照：CSSで動的な幅を持つインラインブロックを中央揃え

これは、要素の内側の幅が分からないdiv内で何かを中央揃えにする1つの方法です。

#product_15{
    position: relative;
    margin: 0 auto;
    display: table;
}
.price, img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

私の解決策は：

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}

このcssをproduct_containerクラスに追加します

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;