html - 居中可缩放图像(用于极其简单的网络)

Question

我正在构建一个即将推出的网站，我想让它变得简单 - 在页面的死 Angular 放置一个图像，可缩放到不同的浏览器大小。我试图用谷歌搜索它，但没有一个解决方案能给我想要的结果。使用 max-width 会产生奇怪的结果，因为我在像素中使用负边距，所以当图像缩放时，这些边距不适用。

我想要居中的图像是 700x700 像素。

欢迎任何帮助:)

这是我当前的页面:http://jsfiddle.net/EYL5U/

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}

img {
position: absolute;
top: 50%;
left: 50%;
width: 700px;
height: 70px;
margin-top: -350px;
margin-left: -350px;
max-width: 100%;
}

当我调整浏览器大小时它不会缩放...

Answer 1

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

jsFiddle example