垂直居中文本，CSS（表格单元格）在Firefox中不起作用

Question

我的文字行从几个单词到一个完整的单词。我需要将文本水平居中，最重要的是垂直居中。

CSS在垂直居中方面真的无可救药地失败了（来吧）但是我找到了一个可以在IE10和Chrome中运行的解决方案，它实际上也适用于firefox，但是firefox将div推到容器下面。

html / css看起来像：

<div style="position:absolute;">
    <div style="position:relative;width:343.17em;height: 237.38em>
      <svg for cloud />
    </div>
    <div style="position:relative;top:-210em;left:30em;width:240em;height: 180em;display: table-cell;vertical-align: middle;text-align: center">
       <p style="text-align: center;display:inline-block">v-center me</p>
    </div>
</div>

在Chrome和IE上看起来像：

在FF上它看起来像：

修改： 这是一个显示确切问题的小提琴。查看chrome然后FF。

http://jsfiddle.net/AwokeKnowing/PJJce/

Answer 1

通过对CSS进行以下更改，我能够在所有3个浏览器中使用它：

#text-wrap
{
    position:relative;
    top:-100px;
    left:30px;
    border:1px solid blue;
    width:200px;
    height:80px;
    display:table; /* Changed to table instead of table-cell */
    /* Removed: vertical-align: middle; */
    text-align:center;
}

#text
{
    text-align:center;
    display:table-cell; /* Changed to table-cell instead of inline-block */
    vertical-align: middle; /* Added vertical align */
}

此外，您错过了<div id="cloud">

上的结束标记