title: How to center align a div vertically which uses bootstrap?
body: <p>I have a row with content which should be in the center of the site and a footer at the bottom. The content are divided into two <code>6 column</code>. i want it to center align vertically according to the screen size. so i tried to give some percentage of <code>top</code> with a position <code>relative</code> but it doesn't work out.</p>
  
  <p>If i give <code>margin-top</code> it is working. In order to make the top we have to give the position, so i have given it <code>relative</code> I don't want position <code>absolute</code> then the footer will come at the top of the site. Other content also will come top i thnik. </p>
  
  <p>How to center align the contents and footer should stay at bottom all time all display size.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class='row'&gt;
  &lt;div class='col-md-6 vertical'&gt; content&lt;/div&gt;
  &lt;div class='col-md-6 vertical'&gt;content right&lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;sit at bottom&lt;/footer&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.vertical{
      position:relative;
     /* margin-top:20%; */ /*works*/
      top:20%; /*not works even providing position */
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/FwmL4/1/" rel="nofollow">JSFIDDLE</a> <strong>NOTE: Don't forgot to resize the window then only you can able to see the two column division</strong></p>