css - インライン ブロック ラッパー div をセンタリングしますか?

Question

私はこのようなことを達成しようとしています: http://i.minus.com/ibxOaBw7BW8b5g.png

これは私がこれまでに持っているものです: http://jsfiddle.net/QAPub/2/

ラッパー/コンテナを中央に配置するにはどうすればよいですか? コンテナが存在するかどうかは本当に気にしません。私の主な目標は、3 つの黒い 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

これを実現するには、いくつかの方法があります。

これが私が使用するものです。コンテナを本体に入れ、マージンを与えて、好きな場所に配置します。

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>

Answer 2

「.clearfix」には次の css を使用します。

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

ここにjsFiddle ファイルがあります。