我有一个问题，当我试图中心的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>
大多数浏览器支持display: table;CSS规则。这是一个在容器中居中div的好技巧，无需添加额外的HTML，也无需对容器应用约束样式(如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 {
背景颜色:绿色;
｝
.centered {
显示:表;
保证金:0自动;
背景颜色:红色;
｝
< div class = "容器" >
<div class="居中">内容居中</div>
< / div >
更新(2015-03-09):
现在正确的方法实际上是使用flexbox规则。浏览器支持有点受限(CSS表支持vs . flexbox支持)，但这种方法也允许许多其他事情，并且是针对这种类型行为的专用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 {
显示:flex;
flex-direction:列;/*如果你想垂直堆叠元素*/
背景颜色:绿色;
｝
.centered {
保证金:0自动;
背景颜色:红色;
｝
< div class = "容器" >
<div class="居中">内容居中</div>
< / div >
Mike M. Lin的回答略有不同
如果添加overflow: auto;(或隐藏)到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)中，您将看到product_container前面的边距为11px。更糟糕的是，即使内容很好地符合屏幕尺寸，整个页面也会出现一个垂直滚动条。
