如何在引导列中垂直居中放置div？[副本]

Question

我试图垂直（和水平）中心div（高度和宽度未知）在引导列。我可以水平中心的div设置文本对齐到中心。然而，我正在努力垂直居中的div。下面是我的代码片段：

<div class="row">
    <div class="col-md-8 col-md-offset-2 col-xs-12">
        <div style="text-align: center"> <!--this works-->
            <p>Content goes here</p>                
        </div>
    </div>
</div>

提前感谢！

Answer 1

您可能想尝试一下：

<div class="row">
   <div class="col-md-8 col-md-offset-2 col-xs-12 Outer">
      <div class="Inner>
         <p >Content goes here</p>                
      </div>
   </div>
</div>


/* CSS Code */

.Outer {
   border: 1px solid black;  /* Just so you can see it centered vertically */
   display: table-cell;
   height: 100%;
   min-height: 15em;    /* Set to height you need */
}
.Inner > p {
   vertical-align: middle;
   text-align: center;
   margin: 0 auto;
}

请记住，浏览器将自动识别分辨率宽度；但是，相同的功能不适用于高度。您需要在外部元素上设置一个指定的高度，以便内部内容能够垂直对齐。希望这有帮助！

Answer 2

如果您使用Twitter Bootstrap，并且您有Bootstrap 3，他们会添加

参考：引导v3.1.1。