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

Question

我有這個HTML：

    <!-- 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類div垂直對齊中間（完美中間）並希望將AboutInfoCol-md-2保持在底部。

如果您使用的是Firefox，則可以看到窗口大小為1080p的AboutInfoCol-md-2失真。

我有小提琴。 演示

任何幫助，將不勝感激。

Answer 1

要啟用vertical-align ，需要在元素的父/容器上設置line-height值。

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

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

更新：在看到Moob的回答（非常感謝）之后，我能夠進行一些更改並讓它在您的示例中很好地運行。 查看Moob小提琴的更新 - http://jsfiddle.net/dj1betmv/6/

看到我已經更新了幾次，我想如果有人再次提出這個問題，我會留下我自己做的參考 - 演示

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/