如何在 Bootstrap 列中垂直居中 div？ [复制]答案

【问题标题】：How to vertically center a div in a Bootstrap column? [duplicate]如何在 Bootstrap 列中垂直居中 div？ [复制]
【发布时间】：2014-07-15 17:32:49
【问题描述】：

我正在尝试在 Bootstrap 列中垂直（和水平）居中 div（高度和宽度未知）。我可以通过将文本对齐设置为中心来水平居中 div。但是我正在努力使 div 垂直居中。这是我的代码的 sn-p：

<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>

提前致谢！

【问题讨论】：

也看看Vertical align with bootstrap 3

标签： html css twitter-bootstrap

【解决方案1】：

如果你使用 Twitter Bootstrap 并且你有 Bootstrap 3，他们添加了<div class="center-block">...</div>。

参考：Bootstrap v3.1.1。

【讨论】：

您好，谢谢您的回复。但是我尝试使用 center-block 类但它不起作用这是我的代码：<div class="row"> <div class="col-md-8 col-md-offset-2 col-xs-12"> <div class="center-block" style="text-align: center; vertical-align: middle;">  <p >Content goes here</p> </div> </div> </div>
这是水平居中，仍然
“center-block”类用于水平居中，而不是垂直居中。

【解决方案2】：

你可能想试一试：

<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;
}

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

【讨论】：

嘿，非常感谢。但是它不起作用。段落水平居中，但仍保持在垂直顶部。