我有一个问题，当我试图中心的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: block '(默认为div)的元素的宽度由其容器的宽度决定。你不能让一个块的宽度依赖于它的内容的宽度(缩小到适合)。
(除了CSS 2.1中' float: left/right '的块，但这对居中没有用处。)
你可以将“display”属性设置为“inline-block”，将一个块转换为一个可以由其父元素的text-align属性控制的收缩对象，但浏览器的支持参差不齐。你可以通过使用黑客(例如。如果你想这样做，请参阅-moz-inline-stack)。
另一种方法是桌子。当您的列的宽度确实无法提前知道时，这可能是必要的。我无法从示例代码中真正看出您想要做什么-其中没有任何明显的需要缩小以适应的块-但是可以将产品列表视为列表。
[附注:永远不要在网络上使用' pt '来表示字体大小。如果确实需要固定大小的文本，' px '更可靠，否则像' % '这样的相对单位更好。还有“clear: ccc both”——拼写错误?］
.center{
text-align:center;
}
.center > div{ /* N.B. child combinators don't work in IE6 or less */
display:inline-block;
}
JSFiddle
剥猫皮的六种方法:
按钮一:任何display: block类型的东西都将采用完整的父宽度。(除非与float或display结合使用:flex parent)。真实的。不好的例子。
按钮2:用于显示:内联块将导致自动(而不是全部)宽度。然后可以在换行块上使用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也不是implicit…)
.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:
现在，你也可以使用flex-box。注意，样式应用于居中对象的包装器。
.wrapSix
display: flex
justify-content: center
→完整源代码(触控笔语法)
