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

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

恐怕唯一不显式指定宽度的方法是使用(gasp)表。

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

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

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

希望能有所帮助!

大多数浏览器支持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 { 背景颜色:绿色; ｝ .centered { 显示:表; 保证金:0自动; 背景颜色:红色; ｝ < div class = "容器" > <div class="居中">内容居中</div> < / div >

更新(2015-03-09):

现在正确的方法实际上是使用flexbox规则。浏览器支持有点受限(CSS表支持vs . 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 { 显示:flex; flex-direction:列;/*如果你想垂直堆叠元素*/ 背景颜色:绿色; ｝ .centered { 保证金:0自动; 背景颜色:红色; ｝ < div class = "容器" > <div class="居中">内容居中</div> < / div >

剥猫皮的六种方法:

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

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