如何将div元素中的fontawesome图标居中

Question

我有一个div width: 180px;和height: 180px;.
如何在容器内水平和垂直居中显示一个fontawesome图标？
注意:我也可以在图标下方添加文字

<div style="width:180px; height:180px; float:left;">
  <i class="fa fa-search fa-4x"></i>
</div>

应该看起来像这样:

Answer 1

试试这个:

.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

.container{
width:100px;
height:100px;
}

在移动.

Answer 2

你可以这样做

#search{
    background: gray;
    width:180px; 
    height:180px; 
    float:left; 
    line-height: 180px;     
    text-align: center;
    vertical-align: bottom;
}

#search > p {
    margin-top: -155px;
}

工作示例http://jsfiddle.net/kasperFranz/h91p8w4e/3/（在示例中使用 icon 代替 fa ，但不应该影响结果。）