Css 将图标垂直和水平居中

我目前正在使用FontAwesome，在容器中垂直和水平居中的图标非常困难。我尝试过通过定位来实现这一点，但遇到了图标大小不同的问题。我基本上是水平的，我试着得到垂直的

<div class='container'>
    <div class='row'>
        <div class='offset2 span6 loginContainer'>
            <div class='row'>
                <div class='login-icon'>    
                    <i class='icon-user'></i>
                </div>
                <input type="text"  placeholder="Email" />

            </div>
            <div class='row'>
                <div class='login-icon'><i class=" icon-lock "></i></div>
                <input type="password" class="" placeholder="Password" />
            </div>
        </div>
    </div>
</div>

.login-icon{
    font-size: 40px;
    line-height: 40px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;

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

.登录图标{
字体大小：40px；
线高：40px；
背景色：黑色；
颜色：白色；
宽度：50px；
高度：50px；
}
.登录图标[class*='icon-']{
高度：50px；
宽度：50px；
显示：内联块；
文本对齐：居中；
垂直对齐：基线；
}

所以我终于得到了它（）

.centerWrapper:之前{
内容：''；
身高：100%；
显示：内联块；
垂直对齐：中间对齐；
}
.中心{
显示：内联块；
垂直对齐：中间对齐；
}

我刚刚将.login图标[class*='icon-'的高度降低到28px] 这是小提琴：

---

这就是您所需要的，不需要包装：

.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;
}

---

我已使用转换来校正偏移。它适用于圆形图标，如生命环

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

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

法兰西{
转化：translateY（-4%）；
}

如果您正在使用twitter引导，请将类文本中心添加到您的代码中

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

---

我只是设法将图标居中放置，并使其成为一个容器，而不是将其放入一个容器中

.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;
}

---

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

看看我的答案，我想你的答案看起来不太中肯。你有硬编码的

行高

这不是动态的。这里不使用垂直对齐。@Obsidian-如果将11行CSS替换为3行不是更好的解决方案（对于我们很多人经常遇到的一个非常普遍的问题），我不知道是什么。@Obsidian这是一个完美的例子，说明了正确的时间为一个旧的、已被接受的问题添加新答案。谢谢！我登录就是为了这样：）这只是水平居中的图标。我试图玩flex居中和垂直对齐中心，但我想不出来。定位：如果定位设置为静态或相对，则在元件发生阻力之前。此IMO是最佳且最干净的解决方案，谢谢：）

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

.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;
}