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

【问题标题】：Center text vertically with CSS (table cell) not working in firefox使用CSS（表格单元格）垂直居中文本在Firefox中不起作用
【发布时间】：2014-09-03 09:47:34
【问题描述】：

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

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/

【问题讨论】：

@RobertSadler 好的，我有一把小提琴。我可以帮忙吗？
有没有其他的 css 方法可以让文本垂直居中而不需要愚蠢的表格单元技巧？
醒了，你能先验证你的标记吗，你的里有东西可能会干扰 Firefox 吗？ **附言。也不见了。

标签： html css firefox cross-browser

【解决方案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"> 的结束标记

【讨论】：

Mike Sheehan，你从 Stackoverflow 上的 9 次静默中回来，只用了 1 次代表，只为这个答案。我猜，AwokeKnowing 是有福的。
你摇滚！进入盛大的方式！