在引导列中垂直居中 DIV 中的内容 [重复]

Question

我想在 DIV 中垂直居中一些文本。但是，我使用的是 Bootstrap，因为它在列中，所以似乎没有一种传统方法有效。到目前为止，这是我所得到的：

HTML：

<div class="col-sm-6">
    <div class="innercontent">
        <h2 class="text-center">Last Hope: The Halo Machinima</h2>
    </div>
</div>

CSS：

.innercontent {
    display:block
    margin:auto 0;
}

col-sm-6 没有固定高度，内部也没有，因为它们会因多种用途而异。 CSS 是我认为可以工作但没有用的。
我希望您可以在此处的实时开发站点上看到效果：http://dev.infiniteideamedia.com/machinima/lasthope.php，但使用不够充分的方法无法完全居中。

Answer 1

这就是你如何在 div 中居中任何具有动态高度的东西

.col-sm-6 {
  border: 1px solid;
  min-height: 300px;
  position: relative;
  max-width: 600px;
}

h2 {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0%,-50%);
  width: 100%;
  text-align: center;
}

<div class="col-sm-6">
     <div class="innercontent">
         <h2 class="text-center">Last Hope: The Halo Machinima</h2>
     </div>
</div>

Answer 2

大卫沃尔什写了一篇很好的article on centering。看看它。 在sn-p下面运行

.innercontent {
 height:400px;
 background:#777; 
padding-top:20%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
  <div class="innercontent">
    <h2 class="text-center">Last Hope: The Halo Machinima</h2>
  </div>
</div>