跨浏览器垂直居中文本

Question

问题

我正在尝试使用大字体大小的跨浏览器将字母垂直居中。看起来更困难，因为我尝试过的每一种方法（行高，显示：表格单元，转换：翻译......）都因大字体大小而失败。该问题仅存在于 OS X 中。

我已经尝试解决这个问题已经有一段时间了，这里有一个仅适用于 Safari 的解决方案：

div {
    width: 200px;
    height: 200px;
    background: #2b2b2b;
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-family: helvetica, arial, sans-serif;
    font-size: 200px;
}

<div>O</div>

这是带有代码的Codepen。

这是 OS X 10.10 的结果屏幕截图，同时支持 Safari、Chrome 和 Firefox：

更新

经过数小时的广泛测试，我设法确定了问题的根源，即字体家族 helvetica。在 Windows 上，字体系列不存在，因此加载的字体只有 arial 或 sans-serif。在 OS X helvetica 上存在，但字体系列在三个浏览器中不同。当我删除字体系列时，字母与行高正确垂直对齐。但是现在，我很想知道为什么会出现这个错误。

这是一个带有新代码的代码笔：link

div {
    width: 200px;
    height: 200px;
    background: #2b2b2b;
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-family: arial, sans-serif;
    font-size: 200px;
}

<div>O</div>

Answer 1

           try this fiddle code :

http://jsfiddle.net/x25wh1ym/1/

div {
    background: none repeat scroll 0 0 #2b2b2b;
    color: #fff;
    font-family: helvetica,arial,sans-serif;
    font-size: 200px;
    height: 100vh;
    position: relative;
    text-align: center;
    width: 200px;
}


span {
    height: 100vh;
    line-height: 100vh;
    position: relative;
    vertical-align: middle;
}<div><span>O</span></div>

Answer 2

我不确定这是否正确，但我删除了行高并添加了填充，例如padding: 30px 0 0 0; 似乎对我有用。不完全确定这是否是您想要的。