当我尝试将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>

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”的高度。

带有“ 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;
}

JSFiddle

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

更新（2015-03-09）：

今天执行此操作的正确方法实际上是使用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>

剥皮猫的六种方法：

按钮一：任何类型的东西都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： 如今，您也可以使用flex-box。请注意，样式适用于居中对象的包装。

.wrapSix
  display: flex
  justify-content: center

→完整的源代码（手写笔语法）

我找到了一个更优雅的解决方案，将“内联代码块”组合在一起以避免使用float和hacky clear：两者。它仍然需要嵌套的divs，虽然不是很语义，但它确实可以工作...

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;
}

如果绝对定位了目标元素，则可以通过在一个方向（left: 50%）上将其移动50％，然后在相反方向（transform:translateX(-50%)）上将其转换50％来使其居中。这种方法无需定义目标元素的宽度（或使用width:auto）。父元素的位置可以是静态，绝对，相对或固定的。

默认情况下，div元素显示为块元素，因此它们具有100％的宽度，使它们居中无意义。如Arief所建议，您必须指定a width，然后可以auto在指定时使用margin以使a为中心div。

另外，您也可以强制display: inline，但随后您会得到一些类似a span而不是a的行为div，所以这没有任何意义。

这将使元素（例如“有序列表”或“无序列表”）或任何元素居中。只需将它包装在具有externalElement类的Div并将内部元素的类设为innerElement即可。

externale类用于IE，旧版Mozilla和大多数新版浏览器。

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

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

使用css3 flexbox与justify-content：center;

    <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;
}

迈克·林的答案略有不同

如果添加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将与附近的其他附近内容重叠。“外部中心”右侧的任何链接或按钮将不起作用。尝试使用“外部中心”的背景色来了解“溢出：隐藏”的需要

我找到了有趣的解决方案，我制作了滑块，不得不将滑块控件居中，并且做到了这一点，并且效果很好。您还可以向父级添加相对位置，并垂直移动子级位置。看看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>

恐怕没有显式指定宽度的唯一方法就是使用（gasp）表。

糟糕的修复程序，但确实有效...

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中居中放置任何内容的一种方法。

#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;