如何垂直對齊兩個div在中心並保留一個div在底部？

Question

我有這個網站：

<!-- Left Navigation Bar --> 
    <div class="row" id="columnMenu"> 

     <!-- Logo --> 
     <div class="col-md-2 LogoCol-md-2"> 
      <div class="nav nav-pills nav-stacked" id="columnMenuTitle"> 
       <a href="" title="" class="navbar-brand"> 
       Picture 
       <br> 
       Imran Name 
       </a> 
      </div> 
     </div> 

     <!-- Categories --> 
     <div class="col-md-2 CategoryCol-md-2"> 
      <ul class="nav nav-pills nav-stacked"> 
       <li>category 1</li> 
       <li>category 2</li> 
       <li>category 3</li> 
       <li>category 4</li> 
       <li>category 5</li> 
      </ul> 
     </div> 

     <!-- About Information --> 
     <div class="col-md-2 AboutInfoCol-md-2"> 
      <div class="nav nav-pills nav-stacked" id="columnMenuAbout"> 
       My Artify &copy; 
       <br> 
       All Rights Reserved 
       <br> 
       Developed by <a>Imran Khan</a> 
      </div> 
     </div> 
    </div> 

我想LogoCol-md-2和CategoryCol-md-2類格垂直居中對齊（完善中），並希望保持AboutInfoCol-md-2在底部。

如果您使用的是Firefox，您可以看到在1080p的窗口大小AboutInfoCol-md-2被扭曲。

我有js小提琴。 demo

任何幫助，將不勝感激。

Answer 1

爲了使您需要設置元素的父/容器上的line-height值使用vertical-align。

爲確保div保留在窗口的底部，您需要將它放在保持100％高度（窗口大小）的包裝器/容器內，然後將以下CSS添加到您的元素中想留在底部：

#about{ 
position: absolute; 
bottom: 0; 
} 

更新：看到Moob的答案（非常感謝）後，我能夠做一些修改，並把它在你的例子很好地工作。檢查Moob的搗鼓這個更新 - http://jsfiddle.net/dj1betmv/6/

看到，因爲我已經更新了好幾次，我想我會離開，我對我自己做參考，如果有人再次有這個問題 - Demo

Answer 2

更新對於AboutInfoCol-md-2 CSS聲明刪除這是一個從.col-md-2繼承了定位，並用自己的替換：

AboutInfoCol-md-2 { 
    height: 10%; 
    position:absolute; /* position absolutely */ 
    top:auto; /* reset top */ 
    bottom:0; /* position at bottom */ 
    transform: none; /* remove the transform:translateY */ 
} 

http://jsfiddle.net/dj1betmv/4/