有一点CSS基础的人都知道margin:0 auto;可以用来居中，但是这个属性对img无效。毕竟咱们的img属于行内元素，margin值无效啊。接下来分享大家两个方法。
方法1
使用改变display属性的方法，懂一点css的攻城狮们都知道行级元素和块级元素的区别。
在没有改变img标签的display属性的时候，它是属于行级元素的，咱们强行把它改成块级元素让我们的margin:0 auto;生效。
css:
div{
height: 200px;
width: 200px;
border: 1px solid #000;
}
div img{
display: block;
margin: 0 auto;
}
效果图：
方法2
使用绝对定位（position：absolute）的方法搞定居中问题。
原理是让图片最左侧定位到正中央，再让margin属性让图片往左边移半个图片的宽度，这样就实现了居中的效果。
这时候别忘了要个父级元素添加position:retative属性。
css:
div{
position: relative;
height: 200px;
width: 200px;
border: 1px solid #000;
}
div img{
position:absolute;
left:50%;
margin-left:-30px;
}
效果图：
同样的垂直居中也可以用这个技巧来完成：
css:
div{
position: relative;
height: 200px;
width: 200px;
border: 1px solid #000;
}
div img{
position:absolute;
top: 50%;
left:50%;
margin-top:-30px;
margin-left:-30px;
}
效果图：
我会把自己学到的知识一起分享给大家，请多多关照。XD
