title: Div margin: auto vs align: center
body: <p>I have 2 divs below each other. I want them both to be centered horizontally. The thing is that I have to use <code>align: center</code> for the <code>#wrapper</code> and <code>margin: auto</code> for the other. Otherwise only 1 of them is centered. If I use <code>align-center</code> for both, only the #wrapper is centered, if I use <code>margin: auto</code> for both, only the second one is centered.</p>
  
  <p>Why I have to use 2 different properties to align them in the center?:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-sm-5 col-sm-offset-3" id="wrapper"&gt;
      &lt;div class="row"&gt;
         &lt;div class="col-sm-1 col-sm-offset-2" id="col1"&gt; col1 &lt;/div&gt;
         &lt;div class="col-sm-1 col-sm-offset-2 " id="col2"&gt; col2 &lt;/div&gt;
         &lt;div class="col-sm-1 col-sm-offset-2" id="col3"&gt; col3 &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="below"&gt;
  Centered div below the #wrapper div
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body{
      height:100%;
  }
  #col1{
      background-color: lime;
      border: solid 1px;
      text-align: center;
  }
  #col2{ 
      background-color:  aqua;
      border: solid 1px;
      text-align: center;
  }
  #col3{
      background-color:  lightpink;
      border: solid 1px;
      text-align: center;
  }
  #wrapper{
      border: solid 1px;
      height: 10%;
      width: 50%;
      align: center;
  }
  
  #below{
      border: solid 2px;
      text-align: center;
      min-height: 100%;
      width: 80%;   
      clear: both;  
      margin: auto;
  }
  </code></pre>