javascript - 在父 div 内垂直居中 div - 相对位置

Question

如果两个 div 都是 position:relative，那么在其父 div 中垂直居中的正确方法是什么？

我的 HTML

<article>
<div class="row">

    <div class="text-cell">
        <div class="text-content"><h1>text</h1></div>
    </div>

</div>
</article>

CSS

article {
  position: relative;
  margin: 0; 
  padding: 0;
}

.text-cell {
  position: relative;
  padding: 0;
  margin: 0;
}

希望“文本单元格”在文章中居中。 ('row' 是 Bootstrap 3 框架)

Answer 1

使用display: inline-block;

http://jsfiddle.net/kk61saw3/

article {
  position: relative;
  margin: 0; 
  padding: 0;
    text-align: center;
}

.text-cell {
   position: relative;
   display: inline-block;
   vertical-align: middle;
    padding: 0;
    margin: 0;
    /*min-height: 50px;*/
    border: 1px solid #000;
    width: 100%;
}

<article>
<div class="row">

    <div class="text-cell">
        <div class="text-content"><h1>text</h1></div>
    </div>

</div>
</article>