如何使用bootstrap垂直居中对齐div？

Question

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 6 column . i want it to center align vertically according to the screen size. so i tried to give some percentage of top with a position relative but it doesn't work out.

If i give margin-top it is working. In order to make the top we have to give the position, so i have given it relative I don't want position absolute then the footer will come at the top of the site. Other content also will come top i thnik.

How to center align the contents and footer should stay at bottom all time all display size.

HTML

<div class='row'>
<div class='col-md-6 vertical'> content</div>
<div class='col-md-6 vertical'>content right</div>
</div>
<footer>sit at bottom</footer>

CSS

.vertical{
    position:relative;
   /* margin-top:20%; */ /*works*/
    top:20%; /*not works even providing position */
}

JSFIDDLE NOTE: Don't forgot to resize the window then only you can able to see the two column division

Answer 1

<div class='row'>
 <div class='col-md-6 '>
   <div class="vertical"> content</div>
 </div>
 <div class='col-md-6 '>
   <div class="vertical"> content</div>
 </div>
</div>
<footer>sit at bottom</footer>

.vertical{
  display: table-cell;
  vertical-align:middle;
  height: 200px /* Accordingly */
}

Working Fiddle Fiddle .

Answer 2

Apart from using display: table-cell , there is one more way to do it but is not so cross-browser at this moment. Take a look at CSS3 Flexbox .