居中嵌套块包装div？

Question

我想实现这样的事情：http://i.minus.com/ibxOaBw7BW8b5g.png

这是我到目前为止有：http://jsfiddle.net/QAPub/2/

我怎样才能居中包装/容器？我真的不在乎容器是否存在，我的主要目标是三个黑色格子的中心，但这是我所得到的。

HTML：

<div class="clearfix"> 
     <div class="content"></div> 
     <div class="content"></div> 
     <div class="content"></div> 
    </div>​ 

CSS：

.clearfix:after { 
     content: " "; 
     display: block; 
     height: 0; 
     clear: both; 
    } 
    .clearfix { 
     background-color: orange; 
     display: inline-block; 
    } 

    .content { 
     float: left; 
     background-color: black; 
     border: 1px solid black; 
     width: 100px; 
     height: 100px; 
     margin: 10px; 
    } 

Answer 1

有一对夫妇，你可以做到这一点的不同方式。

下面是我将使用的一个，将容器放在身体中并给它一个边缘并将其放在任何你想要的位置。

http://jsfiddle.net/QAPub/3/

body{ 
width:500px; 
height:500px; 
} 

.clearfix { 
position:relative; 
background-color: orange; 
display: block; 
width:370px; 
height:120px; 
margin:auto; 
top:20px; 
} 
.content { 
float: left; 
background-color: black; 
border: 1px solid black; 
width: 100px; 
height: 100px; 
margin: 10px; 
} 

Answer 2

使用下面的CSS的 “.clearfix”

.clearfix { 
    background-color: orange; 
    display:table; 
    margin:0 auto; 
} 

这里是jsFiddle file。