图片以 Firefox 为中心，但在 Chrome 处截断

Question

img {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<body style="margin: 0px;">
  <img src="http://i.imgur.com/I3gA11r.jpg">
</body>

在 Firefox 和 Chrome 上尝试代码时，您将能够使用 Firefox 滚动整个图像，但不能使用 Chrome。

css 是正确的还是 chrome/webkit 错误？

Answer 1

试试这个简单的替代方法：

body { display: flex; }

img { margin: auto; }

<body style="margin: 0px;">
  <img src="http://i.imgur.com/I3gA11r.jpg">
</body>

详细解释见：

请注意，所有主流浏览器都支持 flexbox，except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in 。

图片以 Firefox 为中心，但在 Chrome 处截断

Image centered on Firefox but cutoff on Chrome

css

webkit

google-chrome

flexbox