图片的上下左右居中显示

想实现图片的上下左右居中显示，使用下面的代码：
#product-info .product-img{
padding:0px;
border: 1px solid #ddd;

width:200px;
line-height:200px;
height:200px;
vertical-align:middle;
text-align:center;
margin-left:1em;
}
#product-info .product-img img{
display:block;
margin:auto;
vertical-align: middle;
}
.product-img 是套在图片上面的div。
测试了很多次，左右居中很容易就实现了。
不过上下居中，始终不行。

后来将img自己的display:block;这个样式去掉，就解决了。

#product-info .product-img{
padding:0px;
border: 1px solid #ddd;

width:200px;
line-height:200px;
height:200px;
vertical-align:middle;
text-align:center;
margin-left:1em;
}
#product-info .product-img img{
margin:auto;
vertical-align: middle;
}