html - 显示 : table-cell issue in Firefox

Question

我有一个带有 H1 的 div 和一个段落。挑战在于将段落垂直居中。

<div id="id1">
<h1>Header</h1>
<p>paragraph</p>
</div>

我使用:

#id1
{
position: relative;
width: 250px;
height: 250px;
border-radius: 125px;
background: #000;
color: #f00;
}
#id1 h1
{
position: relative;
margin: 0;
padding: 0;
text-align: center;
top: -50px;
}
#id1 p
{
position: relative;
display: table-cell;
vertical-align: middle;
top: -37px;
margin: 0;
padding: 0;
text-align: center;
height: 250px;
width: 250px;
border-radius: 125px;
background: #fff;
color: #000;
}

它适用于大多数新浏览器(甚至 IE8)，但不适用于 FF。我想问题是由于 H1 和 P 的相对位置。但不确定。请帮助我!

fiddle

Answer 1

您的 h1 标签包含文本，FF 将文本高度添加到标题。尝试删除文本，请参阅[此处][http://jsfiddle.net/G3av6/3/]