左浮動要素を中央に揃えるにはどうすればよいですか？

Question

私はさまざまな幅の容器を持っていて、その中にさまざまな数のボックスが浮いています。すべてのボックスは同じwidthとheightです。

これはデモンストレーションです。 https://jsfiddle.net/kghvmjb6/1/

可能であれば、私は純粋なCSSソリューションを探しています。それ以外の場合、純粋なjavascript（jQueryなし）とCSSソリューションは問題ありません。

この例は、1行のフローティングボックスでうまく動作しますが、複数の行で失敗します。これは必要ではありません。 https://codepen.io/alexandredees/pen/ojaFr

Answer 1

代わりのfloatleftを使用して、displayinline-blockを使用して、親でdivcontainer

Modified Fiddle

HTML

<div class="container"> 
<div class=""> 
    <div class="box">1</div> 
    <div class="box">2</div> 
    <div class="box">3</div> 
    <div class="box">4</div> 
    <div class="box">5</div> 
    <div class="box">6</div> 
    <div class="clear"></div> 
</div> 
</div> 

CSSのボックスを中心に説明すること、text-aligncenterを追加

.container { 
    border: 1px solid red; 
    width: 480px; text-align:center; 
} 

    .container.wider { 
    width: 530px; 
    } 

.box { 
    float: none; 
    width: 80px; 
    height: 80px; 
    margin: 10px; 
    background-color: #ddd; 
    display:inline-block; 
    }