火狐html表格,html/css：显示表格单元格不在火狐中居中文本

将鼠标悬停在另一个div上，并在不透明度和一些完全居中div内的文本上淡出。这在所有浏览器中都可以正常工作，除了firefox外。

这里有一个的jsfiddle演示：http://jsfiddle.net/neal_fletcher/WHCNF/

HTML：html/css：显示表格单元格不在火狐中居中文本

TITLE

SUBTITLE

CSS：

.grid-block {

position: absolute;

width: 380px; height: 250px;

margin-left: 25px; margin-right: 25px;

margin-bottom: 50px;

font-family: 'times';

text-align: center;

background: no-repeat 50% 50%;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

cursor: pointer;

display: table; vertical-align: middle;

}

.grid-block-text-hover-wrap {

position: absolute;

width: 100%; height: 100%;

background: rgba(0,0,0,0.75);

display: table;

vertical-align: middle;

}

.grid-block-text-hover-wrap .grid-block-text-wrap {

color: white;

}

.grid-block .grid-block-text-wrap {

display: table-cell; vertical-align: middle;

width: 100%; height: 100%;

}

.grid-block-text-wrap {

margin-left: 50px; margin-right: 50px;

}

.grid-block-text-title {

position: relative;

margin-top: 7px;

margin-bottom: 20px;

text-transform: uppercase;

}

.grid-block-text-hover-wrap .grid-block-text-title {

font-size: 16px;

line-height: 25px;

letter-spacing: 2px !important;

}

.grid-block-text-subtitle {

position: relative;

font-size: 12px;

letter-spacing: 2px !important;

text-transform: uppercase;

}

正如你可以看到.grid-block-text-hover-wrap消失在盘旋，但由于某些原因，在Firefox这个div ISN不能正确显示，也不能将文本居中。我无法弄清楚为什么这似乎正在发生。任何建议将不胜感激！