居中放置div块而没有宽度

Question

当我尝试将div块“ products”居中时出现问题，因为我事先不知道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>

Answer 1

我的原始答案一直在投票，但现在我通常使用@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的宽度，但它们是相同的）。最终，内容将集中在其所在的任何容器中。

您可能需要一个空div在年底，如果你依靠你的“产品”的内容，规格为“product_container”的高度。

Answer 2

带有“ display：block”（默认为div）的元素的宽度由其容器的宽度确定。您不能使块的宽度取决于其内容的宽度（缩小以适合）。

（除了在CSS 2.1中为“浮动：左/右”的块，但这对居中没有用。）

您可以将“ display”属性设置为“ inline-block”，以将一个块转换为一个缩小到适合的对象，该对象可以通过其父对象的text-align属性进行控制，但浏览器支持不佳。如果您愿意的话，通常可以通过使用hack（例如，参见-moz-inline-stack）来摆脱它。

另一种方法是表格。当您的列的宽度实际上事先无法得知时，这可能是必要的。我无法从示例代码中真正看出您要执行的操作-那里没有明显的需要缩小到适合的块-但是，可以将一系列产品视为表格。

[PS。切勿在网络上使用“ pt”作为字体大小。如果您确实需要固定大小的文本，则'px'更可靠，否则相对的单位（例如'％'）会更好。还有“清楚：两者都抄送” —错字了吗？]

.center{

   text-align:center; 

}

.center > div{ /* N.B. child combinators don't work in IE6 or less */

   display:inline-block;

}

Answer 3

大多数浏览器都支持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 {

  background-color: green;

}

.centered {

  display: table;

  margin: 0 auto;

  background-color: red;

}

<div class="container">

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

</div>

今天执行此操作的正确方法实际上是使用flexbox规则。浏览器支持受到更多限制（CSS表支持与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 {

  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>