css - 为什么有时使用高度/行高的垂直居中不起作用？

Question

我经常遇到css单行垂直居中使用line-height的问题。我通常将这种方法用于按钮。我只是设置了高度和行高，没有填充，比如:

height: 44px;
line-height: 44px;

但有时它并不能完全居中。看到这个 fiddle :

https://jsfiddle.net/Lm444sny/1/

我只是好奇它不起作用的原因。文本有点居中，但并不完美。

Answer 1

取决于字体本身的行高。有些字体下面有更多的空白，所以看起来没有对齐。

将按钮行高更改为 47px 或根本不使用内部标记。例如，Chrome 将按钮内的文本与显示 flex 对齐，这是现在垂直居中的最佳方式。看看这个https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/