Question

如果两者都是位置：relative？

，那么在父div中将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;
}

想要＆＃39; text-cell＆＃39;以文章为中心。（＆＃39; row＆＃39;是Bootstrap 3框架）

Answer 1

使用display: inline-block;

http://jsfiddle.net/kk61saw3/

＆＃13;

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

＆＃13;

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

＆＃13;

父div中垂直居中的div - 相对位置

1 个答案: