.active图片居中为什么要设置两种方式？？？

一、margin: auto将对象设置为水平居中对齐。这是因为auto属性值能够使浏览器自动为对象判断外边距大小，但是在下面的情况下却失效了.

>当设置相应的position元素，它的“margin:auto”会失效。

因为，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，绝对定位层的margin:auto 会失效。

解决方案：设置了 position 属性后，在设置 left和right 为 0 后，也就是左右不限制，通过margin：0 auto； 左右自动，来实现拔河效果，那垂直居中一个道理。

二、问题“图片img为什么要设置成100%然后在左偏移30%”

因为通过 .banner > ul > li 设置了大小，但是不是图片的大小，所以在框里看到的是原始图片从左上角显示的效果，如想看到我们要的效果，要设置图片的大小和位置。

解决：img设置 left: -30%; height: 100%; 将图片高设置成框一样大，宽度根据高自动调整，因为图片宽比较长，所以设置left: -30%将图片向右移动，显示希望的图片部分。

在好好思考下，动手实践下，希望对你有帮助，祝学习愉快，欢迎采纳。