How can I make a container div the same width as it's floating children and center it when there are multiple rows of floating children?
<p>I have a container div with multiple floating child divs. Each child has the same width, but the size of the row varies based on screen width. I want the container to only be the width of its children and also be centered, all dynamically depending on screen size. This post explains a similar problem:</p>

<p><a href="https://stackoverflow.com/questions/31953263/container-div-changes-width-when-a-second-row-of-floating-children-is-added">Container div changes width when a second row of floating children is added</a> </p>

<p>Here is a fiddle that also explains the issue:</p>

<pre><code>.centered {
  text-align: center;
}

.container {
  background: red;
  padding: 10px;
  display: inline-block;
}

.child {
  width: 100px;
  height: 100px;
  float: left;
}

.child:nth-child(even) {
  background: green;
}

.child:nth-child(odd) {
  background: blue;
}
&lt;div class="centered"&gt;
  &lt;div class="container"&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/LxLjv3tm/1/" rel="nofollow noreferrer">http://jsfiddle.net/LxLjv3tm/1/</a></p>

<p>Here is another stackoverflow post that solves the issue for one row:</p>

<p><a href="https://stackoverflow.com/questions/18482505/having-the-floating-children-elements-determine-parent-width">Having the floating children elements determine parent width</a></p>

<p>(the issue is there are enough floating children to make multiple rows)</p>