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

想要“文本單元”以文章為中心。 （“行”是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>