css中如何让过宽的图片在页面中居中显示

在做网页的时候，插入一张图片，发现这张图片过宽，中间重要的内容不能完全显示出来，如下图所示

如果让这张图片居中，岂不是美滋滋，但又发现了一个尴尬的问题，因为图片是在body中的，没办法居中。此时可能有人会想到可以使用定位让图片向左移动，这样虽然可以解决，但有个问题，如果用户缩放页面的话，这张图片又会变得不居中。

是不是无解了，那就来看看我这种近似完美的方法吧。

---

先看看刚刚那张图片的的位置,可以看到图片超过了浏览器窗口

接下来先对图片进行绝对定位(或相对定位)，相对左边框50%，

position: relative；
left: 50%;

结果如下，图片左边框到了页面中心处

最后一步，将图片向左移动，移动像素是图片宽度的一半，在这里只能通过margin-left: -960px;来移动，不能使用margin-right: 960px;，切记,如下图，图片就居中了

实际效果

使用这种方法的优点是，当用户缩放页面或者放大页面的时候，图片始终居中，不会受缩放的改变而改变