Html 图像漂浮在屏幕外

我需要将图像与浏览器窗口的中心对齐，因此我创建了以下css：

@charset "utf-8";
/* CSS Document */
html {
    background-color:#CCCCCC;
}
body {
    margin:0px 0px 0px 0px;
}
img {
    position:absolute;
    border:0px;
    left:50%;
    top:50%;
    margin-left:-156px;
    margin-top:-217px;
}

img {
    border: 0px;
    margin: auto auto;
}

但是，问题是，如果将浏览器窗口设置得非常小，图像将浮动到顶部和左侧。相反，它应该固定在左上角，然后可以滚动查看图像的其余部分

在此处查看问题：

尝试以下css：

@charset "utf-8";
/* CSS Document */
html {
    background-color:#CCCCCC;
}
body {
    margin:0px 0px 0px 0px;
}
img {
    position:absolute;
    border:0px;
    left:50%;
    top:50%;
    margin-left:-156px;
    margin-top:-217px;
}

img {
    border: 0px;
    margin: auto auto;
}

问题在于您的负边距，正是这些边距导致图像被推到左边而看不见。如果您使用

margin:auto

，它应该为您将图像居中，您不必使用百分比的绝对定位

编辑：刚刚测试了我的方法，但没有达到预期效果。然后，您可以做的是（如果您不介意使用div），将图像包装在div中。将div设置为图像的大小，然后使用

边距：auto将正常工作

Edit2：感谢Senthil指出，如果将“图像显示”属性设置为“块”，则不必将图像包装在div中以使其居中。但是，auto不适用于垂直居中div，如果需要居中，可以使用百分比（尽管我不确定这是否会导致不同分辨率的问题）

如果编辑中的解决方案与图像是内联元素而div是块元素有关，则可以将图像的display css属性设置为“block”