跨浏览器垂直中心文本

Question

问题

我试图用一个大字体大小的跨浏览器垂直居中一个字母。它似乎显得更加困难，因为我尝试的每一种方法（行高，显示：table-cell，transform：translate ...）都失败了，字体很大。该问题仅存在于OS X中。

我已经尝试解决此行为问题很长一段时间了，这里的解决方案仅适用于Safari：

＆＃13;

＆＃13;

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

＆＃13;

<div>O</div>

＆＃13;

＆＃13;

＆＃13;

这里有Codepen代码。

这是 OS X 10.10 中包含Safari，Chrome和Firefox的结果屏幕截图：

更新

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

这是使用新代码的代码集：link

＆＃13;

＆＃13;

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

＆＃13;

<div>O</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我不确定这是否正确，但我删除了行高并添加了填充，例如填充：30px 0 0 0; 似乎为我做了。不完全确定这是否是你想要的。

Answer 2

           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>