垂直对齐页面上的 div（使用引导程序？）

Question

我正在尝试在我的页面中对齐一个 div，以便它始终直接位于中心。我已经搜索了该站点，但看不到任何使页面居中而不仅仅是 div 的解决方案。

使用 bootstrap (3.2.0) 我可以将其水平居中，但不能垂直居中！

到目前为止，这是我的代码：

HTML

<div class="slide">
    <div class="container">
        <div class="row">
             <div class="logo col-md-4 col-md-offset-4">
                 <p>Test</p>
             </div>
        </div>
    </div>
</div>

CSS

.logo {
border: solid;
border-color: red;
border-width: 5px;
height: 200px;
}

我试过verticle-align: middle;、margin:auto;和margin-top:auto; margin-bottom:auto;没有效果。

我能得到的最接近的是使用margin-top: 20%;，但这不会像页面高度那样缩小。

Answer 1

在引导程序中没有神奇的方法可以做到这一点。您需要一个辅助 div 包装器来销毁表结构。

<div class="slide">
<div class="container">
    <div class="row">
         <div class="logo col-md-4 col-md-offset-4">
             <div class="helper">
                 <span>Test</span>
             </div>
         </div>
    </div>
</div>
</div>

.logo {
 border: solid;
 border-color: red;
 border-width: 5px;
 height: 200px;
}
.helper{
background:#ccc;
width:100%;
height:100%;
text-align:center;
display:table;
}
span{
display:table-cell;
vertical-align:middle;
}