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

【问题标题】：Why sometimes vertical centering with height/line-height doesn't work?为什么有时使用高度/行高的垂直居中不起作用？
【发布时间】：2017-06-01 22:03:01
【问题描述】：

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

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

但有时它并不完全居中。看到这个小提琴：

我只是好奇它为什么不起作用。文本有些居中，但并不完美。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

是的，我经常使用 flexbox，但事实并非如此，因为（真正的项目）按钮已经是文本字段旁边的 flex 项（请参阅其他通过 flexbox 解决的项:P) 所以它同时是弹性项目 + 弹性容器。

【解决方案2】：

为什么不使用 flex-box 代替？您可以将 display:flex 应用于按钮，它的内容将是一个弹性项目（在这种情况下是一个简单的文本）。

【讨论】：

【解决方案3】：

它依赖于垂直对齐属性。有时当您使用例如图标字体时，符号可以有不同的高度。

使用 flexbox 可以获得垂直居中的最佳结果：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：