html - 中心 child 动态div

Question

我必须将 div 水平居中。 cont1 div 是父 div 。它将占用设备的宽度。而 cont2 是子 div，它将根据其内容采用宽度。child div 的数量是动态的。所有的 div 都完美居中。但问题在于最后一个 div。我想要左侧的最后一个 div。我尝试了很多技巧。但无法解决这个问题。

我不想使用 javascript 或 jquery。

这是 fiddle 链接 Fiddle link

这是html

<div class="cont1">
    <div class="cont2">
        <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
         <div class="child">  </div>

    </div>
</div>

这是CSS

.cont1 {
    background-color: #e6e6e6;
    height: auto;
    margin: 0 auto;
    min-width: 600px;
    position: relative;
    text-align: center;
    width: 840px;
}
.cont2 {
    display: inline;
    text-align: left;
}
.child{
     display: inline-block;
    margin: 4px;
    max-width: 230px;
    width: 30%;
height:100px;
    background-color:red;
}

Answer 1

Demo

CSS

.cont1 {
    background-color: #e6e6e6;
    height: auto;
    margin: 0 auto;
    min-width: 600px;
    position: relative;
    width: 840px;
    text-align: left; /* make it left */
}

.cont2 {
    /* display: inline; remove this */
    max-width:600px; /* add this */
    margin:auto; /* add this */
}