关于div中图片水平垂直居中操作

在前端编写过程中，

我发现垂直居中一直没有较好的总结，

所以我总结了一篇文章，希望对大家有所帮助

示例代码

<!--HTML代码-->

<div>

<img src='http://img1.gtimg.com/digi/pics/hv1/121/211/2185/142133551.jpg' >

</div>

<!--CSS代码-->

<style>

div {width:400px; height: 400px; line-height: 400px;text-align: center;}




 div img { vertical-align: center;width: 100%;}

</style>




通过以上代码即可实现图片在div中的水平垂直居中