css - 使用绝对定位和显示: table时div不填充父级

Question

我正在使用一段代码将一个 div 在另一个 div 中垂直居中。在 safari/chrome/etc (webkit) 中，以下工作:

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display:table;

但是在 firefox 上这不起作用，为什么会这样，我该如何解决。

附言我使用的是所有浏览器的最新版本

请检查我的 fiddle 以查看实际问题。

http://jsfiddle.net/matt3224/prx7o1yx/

Answer 1

尝试以下操作:

.parent-div {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid red;
}
.child-div {
  position: absolute;
  width: 296px;
  height: 296px;
  border: 2px solid black;
}

<div class="parent-div">     
  <!-- Parent DIV -->     
  <div class="child-div">     
    <!-- Child DIV -->
  </div>
</div>