How to center a fontawesome icon inside a div element

Question

I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon

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

should look something like this:

Answer 1

Try this:

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

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

On mobile.

Answer 2

You can do it like this

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

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

Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)