title: Center a group of div's in a div
body: <p>Is it possible to center a group of divs in one div so it'll look like this?</p>
  
  <p><a href="http://oi49.tinypic.com/1yo2dh.jpg" rel="nofollow">http://oi49.tinypic.com/1yo2dh.jpg</a></p>
  
  <p>I wonder if you can do it without using a table. </p>
  
  <p>Right now I got this HTML:</p>
  
  <pre><code>&lt;nav class="imagemenu"&gt;
      &lt;div id="categories"&gt;
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;    
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;         
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;
          &lt;div class="cata" onClick="#" style="cursor:pointer;"&gt; &lt;img src="image/placeholder.jpg" /&gt; &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;  
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>.home-menu {
      width:780px;
      height: 340px;
      margin-top:10px;
      padding: 20px;
      background-color:#CCC;
  }
  
  #categories {
      width:740px;
      height:340px;
      margin:0 auto;
      background-color:#333;
  }
  
  .cata {
      width:150px;
      height:100px;
      margin-bottom: 20px;
      float:left;
      background-color:#FFF;
      opacity:0.5;
  }
  .cata {
      opacity:1.0;
  }
  </code></pre>
  
  <p>Sizes are still depending but is there a possible option to easily center all the cata's in the categories div?</p>
  
  <p>I tried some options like <code>overflow</code> and <code>text-align:center</code> from other related questions, and perhaps I used them wrong but they don't work. </p>