<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

｝

使用span代替内部div

<div class="container_box">
   <span class="content">Hello</span>
</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。更糟糕的是，即使内容很好地符合屏幕尺寸，整个页面也会出现一个垂直滚动条。

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

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

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

希望能有所帮助!

我的解决方案是:

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}

这将使一个元素居中，如有序列表、无序列表或任何元素。 只需用类为outerElement的Div包装它，并给内部元素类为innerElement。

outerelement类适用于IE、旧Mozilla和大多数较新的浏览器。

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

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

剥猫皮的六种方法:

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

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