title: How to center in div without text-align?
body: <p>How to center squares in the <code>wrapper</code> without using <code>text-align:center</code>? <br/>
  I need this because it also centers all text in squares, but I don't need this.</p>
  
  <p><strong>HTML</strong> :</p>
  
  <pre><code>    &lt;div id="wrapper"&gt;
          &lt;div id="squares"&gt;
              &lt;div class="square"&gt;lol&lt;/div&gt;
              &lt;div class="square"&gt;lol&lt;/div&gt;
              &lt;div class="square"&gt;lol&lt;/div&gt;
              &lt;div class="square"&gt;lol&lt;/div&gt;
              &lt;div class="square"&gt;lol&lt;/div&gt;
              &lt;div class="square"&gt;lol&lt;/div&gt;
              &lt;div class="square"&gt;lol&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>html, body{
      height: 100%;
  }
  body {
      line-height: 18px;
  }
  
  #wrapper{
      width: 960px;
      height: 100%;
      border: 1px solid red;
      margin: 0 auto;
  }
  .square {
      width:251px;
      height:207px;   
      border: 1px solid #d6d6d6;
      -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
      -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
      box-shadow: 1px 1px 3px rgba(0,0,0,.1);
      margin: 10px;
      overflow:hidden;
      position:relative;
      background-color:#fff;
      display: inline-block;
      cursor: pointer;
  }
  </code></pre>