Line-Height不会在Mac上垂直居中文本，但在Windows上看起来很好

Question

我创建了一个显示浏览器页面大小的页面。问题在于文本显示浏览器的高度和宽度。虽然文本在Windows计算机上完美对齐，但在Mac上查看时它们会显得很严重。当使用外部资源（http://fonts.com）生成所需字体'Rockwell Extra Bold'时，也值得注意这个问题。

网站链接： http://howbigismybrowser.com/

持有文本的容器的基本CSS如下：

#display: {
    background: #232323; border: 15px solid #fff;
    color: #fff;
    font-family: 'Rockwell W01 Extra Bold', Arial, sans-serif;
    font-size: 4.063em;
    text-align: center;
    height: 170px;
    line-height: 170px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

更新

'display：table'已应用但由于某种原因，字体底部有额外的空格。似乎不是额外的边距或填充。

Answer 1

您所使用的字体的行高似乎与您已经建议的呈现方式不同。我尝试在检查器中更改font-family：某些字体使用行高技巧很好用，有些则不行。那么垂直居中的其他方法呢：像这样：

<!-- language: lang-css -->
#display {
    /* line-height: 170px; */
    /* height: 170px; */
    display: table;
    [...]
}

#width, #height {
    /* float: left; */
    /* height: 100%; */
    display: table-cell;
    vertical-align: middle;
}

毫无疑问，你需要修复其他一些样式，但这可能是做同样事情的有效方法，但不依赖于行高。

参考：http://css-tricks.com/centering-in-the-unknown/