Question

css问题，关于margin:0 -100%，有多少人知道？

本人写css4年了，做响应式网站1年多了，许多响应式的css写法都是参照国外的网站来学习。
前段时间发现了一个让图片居中的写法，img.st {margin:0 -100%};感觉很是好用，但在网站测试的时候发现在原生的ie9(可用ietester模拟)下，这个不起作用，实在没找到原因，想问问有没有人也使用过这个写法，或是知道这个问题的解决方法。希望css爱好者来分析一下。
demo演示：
http://pan.baidu.com/s/1mgGBeXU
补充：大家可以下载我制作的简单demo来测试下。

这个不是想象的那么简单，div里面的图片是1920宽度的，外层div的的宽度是要自适应屏幕的，也就是说，不管外面的div宽度是多宽，里面的图片都要保证尺寸不变，并且居中，这个在响应式网站中经常会用到。

如果在1366分辨率的屏幕下，简单的写法，图片就会不居中。我从前一直使用的position:absolute; left:50%; margin-left:-960px;来使图片在小屏幕下也居中，后来在国外网站上发现了margin:0 -100%的简洁写法，感觉很好用，目前只发现在原生的ie9下有问题，ie11，ie10,ie8,ie7,ie6下都正常全兼容，原生ie9下现在没找到解决办法。

Answer 1

写CSS 3年，写响应式布局2年。今天有幸学到这招真的感激不尽。

先不说无用的了，这问题的起因是IE9对margin属性理解的有些误差。

如果仅仅是IE9会出现这种麻烦，那么我已经解决了，虽然有些小问题还是未能解决，代码如下

margin:0 -50%\0;

这代码要加在你原有代码的后面不要覆盖，后面的\0不要删掉，这是CSS HACK技术，专门针对IE9

小问题就是当显示范围小于图片的50%的时候，这时候图片的缩放会跟margin:0 -100%有所不同。

IE9的确测试了是正常的。这有可能仅仅是IETESTER的BUG而已

Answer 2

学习了。。不过我用ie9测怎么就正常。。还有就是既然div宽度小于图片了，图片就显示不全了，就直接给width:100%;不行吗

追问

需要原生的ie9，如果你的IE是ie10或ie11，用开发人员工具模拟出来的ie9是正常的。
如果你的ie最高就是ie9也就是原生的ie9就会出问题，原生ie9可以用ietester模拟出来。

Answer 3

为IE9或者IE单独写个HACK即可。margin:0 auto

Answer 4

margin:0 auto;不就是剧中吗？如果还不行就在div中加 text-align:center（因为img是行内元素）;margin:0 auto应该是快元素都可以吧！！！

追问

不，这个不是你想象的那么简单，里面的图片是1920宽度的，外层div的的宽度是要自适应屏幕的，在响应式网站中经常会用到。如果在1366分辨率的屏幕下，简单的写法，图片就会不居中。我从前一直使用的position:absolute; left:50%; margin-left:-960px;来使图片在小屏幕下也居中，后来在国外网站上发现了margin:0 -100%的简洁写法，感觉很好用。