I'm building a site with some services icons, but having a hard time getting the image to stay vertically centred in the div. Right now, I'm using "margin" on the img to manually center it, but I'd like to find a more fluid solution.

HTML

```
<div class="box">
<a href="#" class="services"><img src="http://s24.postimg.org/3t7bg1qgh/Scissors.png"/></a>
</div>

```

CSS

```
.box{
position: relative;
width: 100%;        /* desired width */
}

.box:before{
content: "";
display: block;
padding-top: 100%;  /* initial ratio of 1:1*/
}

a.services{
position:  absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align:center;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
border:20px solid #e5f2f7;
border-radius:100%;
text-align:center;
display:inline-block;
}

a.services:hover{
border:40px solid #7ed4f7;
}

a.services img{
    margin:32% 0;
}

a.services:hover img{
    margin:30% 0;
}

```

Here's a fiddle of what I have so far: <http://jsfiddle.net/Lpzve/1/>