css - 将内联块包装器 div 居中？

Question

我正在尝试实现这样的目标：http: //i.minus.com/ibxOaBw7BW8b5g.png

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

如何使包装器/容器居中？我真的不在乎容器是否存在，我的主要目标是三个黑色 div 的中心，但这是我所得到的。

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

​</p>

Answer 1

对“.clearfix”使用以下 css

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

这是jsFiddle 文件。

Answer 2

有几种不同的方法可以实现这一点。

这是我将使用的一个，将容器放入主体中并为其留出边距并将其放置在您想要的任何位置。

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

​</p>