Css 将内联块包装器div居中？

我正在努力实现这样的目标：

这就是我到目前为止所做的：

如何将包装纸/容器置于中心位置？我真的不在乎这个容器是否存在，我的主要目标是在三个黑色分区的中间，但这是我所能做到的

HTML:

---

​

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

这是一个我会用的，把容器放在身体里，给它留边，放在你想放的地方

​

对“.clearfix”使用以下css

这是你的电话号码

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

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

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

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