居中一个没有宽度的div块
当我尝试将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
这里的想法是，你包含你想要集中在两个div，一个外部和一个内部的内容。 你浮动两个div，使他们的宽度自动缩小，以适应你的内容。 接下来，你相对定位外部的div，它的右边缘位于容器的中心。 最后，你相对定位内部div的相反方向的一半宽度（实际上是外部div的宽度，但它们是相同的）。 最终将内容集中在任何容器中。
如果您依靠“产品”内容来调整“product_container”的高度，则可能需要最后一个空的div。
带有'display：block'的元素（默认为div）的宽度由其容器的宽度决定。 您不能根据其内容的宽度来制作块的宽度（缩小到适合）。
（除了CSS 2.1中'float：left / right'的块以外，这对于居中无用。）
您可以将'display'属性设置为'inline-block'，以将块变为可由其父级的文本对齐属性控制的缩小到适合的对象，但浏览器支持是不确定的。 如果你想要这样做，你可以通过使用黑客（例如，参见-moz-inline-stack）来获得它。
另一种方式是桌子。 如果您的列的宽度实际上无法预先知道，则这可能是必需的。 我无法真正告诉你要从示例代码中做什么 - 没有什么明显的需要缩小到适合的块 - 但产品列表可能被视为表格。
[PS。 不要在网页上使用'pt'作为字体大小。 如果你真的需要固定大小的文本，'px'更加可靠，否则像'％'这样的相对单位更好。 和“清楚：ccc都” - 一个错字？]
.center{
text-align:center;
}
.center > div{ /* N.B. child combinators don't work in IE6 or less */
display:inline-block;
}
的jsfiddle
大多数浏览器都支持display: table; CSS规则。 这是一个很好的技巧，可以在不添加额外的HTML的情况下在容器中对div进行居中，也不会向容器应用约束样式（如text-align: center;会将所有其他内联内容集中在容器中），同时保持容器的动态宽度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>