这就是您所需要的一切，无需 Package ：

.login-icon{
    display:inline-block;
    font-size: 40px;
    line-height: 50px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: bottom;
}

http://jsfiddle.net/e2UPC/6/

我已经使用变换来纠正偏移。它与圆形图标，如生命戒指的工作很好。

<span class="fa fa-life-ring"></span>

.fa {
    transform: translateY(-4%);
}

水平和垂直居中图标的最简单的解决方案是：

<div class="d-flex align-items-center justify-content-center">
    <i class="fas fa-crosshairs fa-lg"></i>
</div>

于是我终于得到了它（http://jsfiddle.net/ncapito/eYtU5/）：

.centerWrapper:before {
    content:'';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.center {
    display:inline-block;
    vertical-align: middle;
}

<div class='row'>
    <div class='login-icon'>
        <div class='centerWrapper'>
            <div class='center'> <i class='icon-user'></i></div>
       </div>
    </div>
    <input type="text" placeholder="Email" />
 </div>

我只是把高度降低到28 px。login-icon [class*='icon-']下面是小提琴：http://jsfiddle.net/mZHg7/

.login-icon [class*='icon-']{
    height: 28px;
    width: 50px;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
}

可以使用垂直变换：

<span class="fas fa-user" style="transform: translateY(-10%);"></span>

我只是设法如何中心图标，并使他们成为一个容器，而不是把他们放入一个。

.fas {
    position: relative;
    color: #EEE;
    font-size: 16px;
}
.fas:before {
    position: absolute;
    left: calc(50% - .5em);
    top: calc(50% - .5em);
}
.fas.fa-icon {
    width: 60px;
    height: 60px;
    color: white;
    background-color: black;
}

如果您使用的是twitter Bootstrap，请将类text-center添加到代码中。

<div class='login-icon'><i class="icon-lock text-center"></i></div>

我找到了一个更简单的方法..

将text-align:center;属性添加到父元素，并添加margin-top:50%;以添加顶部边距。
根据问题：

.login-icon {
  text-align: center;
}

.icon-lock {
  margin-top: 50%;
}

以后再谢我。