Question

我无法垂直居中使用字体Helvetica Neue。我使用了三种不同的流行方法（行高等于容器，表格单元格，填充），这似乎适用于许多其他字体，但Helvetica Neue似乎比其他字体更高。我在这里举了一个例子：

其他人是否遇到同样的问题？或者有人可以指出我做错了什么？

Answer 1

我认为您希望字体根据x高度（字符x的高度）而不是字体的整个高度垂直居中。根据字体以及字体与容器的大小接近程度，这种差异变得很明显。有关如何以最佳方式实现此目标的问题，请参阅Vertical alignment based on x-height。

我首选的方法是使用:after伪选择器添加与其父级一样高的空容器，并使用vertical-align: middle根据x高度垂直居中。

.xheight {
    font-size: 40px;
    text-align: center;
}

.xheight:after {
    content: '';
    line-height: 50px;
    vertical-align: middle;
}