有一点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