我找到了一个更优雅的解决方案，结合“内联块”来避免使用float和俗气的clear:两者。它仍然需要嵌套的divs，这不是很语义，但它只是工作…

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

希望能有所帮助!

将这个CSS添加到product_container类中

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;

剥猫皮的六种方法:

按钮一:任何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

→完整源代码(触控笔语法)

默认情况下，div元素显示为块元素，因此它们有100%的宽度，使得居中没有意义。正如Arief所建议的，你必须指定宽度，然后你可以在指定边距时使用auto，以便将div居中。

或者，您也可以强制display: inline，但这样您就会有一些行为非常像span而不是div的东西，所以这没有多大意义。

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

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

我发现了一个有趣的解决方案，我正在制作滑块，必须将滑块控制居中，我这样做，工作很好。您也可以添加相对位置到父和移动子位置垂直。看看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>