title: Centering multiple DIVs inside container of unknown size
body: <p>I have multiple blue divs of known size (180 x 180 px) inside a container of unknown size.  </p>
  
  <p><img src="https://i.stack.imgur.com/l4NtS.png" alt="enter image description here"></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              @import url('http://getbootstrap.com/dist/css/bootstrap.css');
  
              .content {
                  border:1px solid black;
                  background-color: grey;
                  overflow:hidden;
                  text-align:center;
              }
  
              .block {
                  width: 180px;
                  height: 180px;
                  border: 1px solid black;
                  background-color:blue;
                  margin: 0 5px 5px 0;
                  float:left;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6"&gt;
                  &lt;div class="content"&gt;
                      &lt;div class="block"&gt;&lt;/div&gt;
                      &lt;div class="block"&gt;&lt;/div&gt;              
                      &lt;div class="block"&gt;&lt;/div&gt;
                      &lt;div class="block"&gt;&lt;/div&gt; 
                      &lt;div class="block"&gt;&lt;/div&gt;
                      &lt;div class="block"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my <a href="http://jsfiddle.net/52VtD/7653/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p>I'd like to know two ways of centering these blue boxes.</p>
  
  <p>First:</p>
  
  <p><img src="https://i.stack.imgur.com/rJzfU.png" alt="enter image description here"></p>
  
  <p>Second:</p>
  
  <p><img src="https://i.stack.imgur.com/WC09M.png" alt="enter image description here"></p>