Question

我需要将图像对齐到浏览器窗口的中心，因此我创建了以下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;
}

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

在此处查看问题：ejlstrup.com

Answer 1

尝试以下css：

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

问题在于您的负边距，它们是导致图像被推到视图左侧的原因。如果您使用margin: auto auto，它应该为您居中图像，您不必使用百分比的绝对定位。

编辑：刚刚测试了我的方法，它没有按预期工作。那么你可以做什么（如果你不介意使用div），就是将图像包装在div中。使div成为图像的大小，然后margin: auto auto;将正常工作。

Edit2：向Senthil致记，指出如果将图像显示属性设置为阻止，则不必将图像包装在div中以使其居中。但是，auto不能垂直居中div，如果需要居中，你可以使用百分比（虽然我不确定这是否会导致不同分辨率的问题）。

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

图像浮出屏幕

1 个答案: