html - 如何使用 bootstrap 垂直对齐div的居中位置？

我有一排内容，该内容应位于网站的中心，而页脚位于底部。内容分为两个6 column。我希望它根据屏幕尺寸垂直居中对齐。所以我试图给top一定比例的位置relative，但它没有成功。

如果我给margin-top它正在工作。为了达到顶部，我们必须给出位置，所以我给了它relative我不希望出现位置absolute，那么页脚将位于站点顶部。其他内容也将排在第一位。

如何使内容和页脚居中对齐，所有显示尺寸始终应始终位于底部。

的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注意：不要忘记调整窗口大小，只有这样您才能看到两栏的划分

最佳答案

<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 */
}

工作提琴Fiddle。