这个问题几年前就有人问过了。我认为技术已经发生了很大的变化，浏览器的兼容性也更好了。你可以使用垂直对齐，但我认为它的可伸缩性和可重用性较差。我建议使用flexbox方法。

下面是原始海报使用的相同示例，但使用了flexbox。它为单个元素设置样式。如果按钮大小因某种原因而改变，它将继续保持垂直和水平居中。

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

例如:JsFiddle

尝试设置你的图标高度:100%

您不需要对包装器做任何操作(比如，您的按钮)。

这需要字体Awesome 5。不确定它是否适用于旧的FA版本。

.wrap svg {
    height: 100%;
}

注意，图标实际上是svg图形。

Demo

对我来说，只要让元素显示网格，并对齐内容就可以完美地工作。简单的解决方案。

.yourfontawesome<i>Element{
display: grid;
align-content: center;
}

简单地定义图标元素的垂直对齐属性:

div .icon {
   vertical-align: middle;
}

对于那些使用Bootstrap 4的人来说很简单:

<span class="align-middle"><i class="fas fa-camera"></i></span>

如果没有对齐，一个简单的line-height: inherit;通过CSS在特定的i.a a元素有对齐问题可以做的伎俩足够简单。

你也可以使用全局解决方案，由于CSS的特异性略高，它将覆盖FontAwesome的.fa规则，该规则指定line-height: 1而不需要属性上的!important:

i.fa {
  line-height: inherit;
}

只要确保上面的全局解决方案不会在你可能使用fontaweesome图标的地方引起任何其他问题。