为什么有时使用 height/line-height 的垂直居中不起作用？
Why sometimes vertical centering with height/line-height doesn't work?
我经常遇到 css 使用 line-height 单行垂直居中的问题。我通常将这种方法用于按钮。我只是设置了高度和行高，没有填充，比如：
height: 44px;
line-height: 44px;
但有时它并不能完全居中。看到这个 fiddle:
https://jsfiddle.net/Lm444sny/1/
我只是想知道它不起作用的原因。文本有点居中，但并不完美。
它依赖于垂直对齐属性。有时当您使用例如图标字体时，符号可以有不同的高度。
使用弹性框可以实现垂直居中的最佳效果：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
取决于字体本身的行高。有的字体下边留白比较多所以好像没对齐
将按钮行高更改为 47px 或根本不使用内部标记。 Chrome 例如，将按钮内的文本与 display flex 对齐是现在垂直居中的最佳方式。
看看这个https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
为什么不改用 flex-box？您可以将 display:flex 应用于按钮，它的内容将是一个弹性项目（在本例中是一个简单的文本）。
我经常遇到 css 使用 line-height 单行垂直居中的问题。我通常将这种方法用于按钮。我只是设置了高度和行高，没有填充，比如：
height: 44px;
line-height: 44px;
但有时它并不能完全居中。看到这个 fiddle:
https://jsfiddle.net/Lm444sny/1/
我只是想知道它不起作用的原因。文本有点居中，但并不完美。
它依赖于垂直对齐属性。有时当您使用例如图标字体时，符号可以有不同的高度。
使用弹性框可以实现垂直居中的最佳效果：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
取决于字体本身的行高。有的字体下边留白比较多所以好像没对齐
将按钮行高更改为 47px 或根本不使用内部标记。 Chrome 例如，将按钮内的文本与 display flex 对齐是现在垂直居中的最佳方式。 看看这个https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
为什么不改用 flex-box？您可以将 display:flex 应用于按钮，它的内容将是一个弹性项目（在本例中是一个简单的文本）。