垂直对齐/圆形div

Question

我正在用一些服务图标构建网站，但很难让图像在div中保持垂直居中。现在，我在img上使用“边距”来手动居中，但我想找到更流畅的解决方案。

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

这里是什么，我至今小提琴：http://jsfiddle.net/Lpzve/1/

Answer 1

如何将图像定位是这样的：

a.services img { 
    position:absolute; 
    margin:auto; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
} 

jsFiddle example

Answer 2

a.services img { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    margin: auto; 
} 

http://jsfiddle.net/Lpzve/2/