圖片飄出屏幕

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;將正常工作。

編輯2：學分Senthil指出，如果您設置圖像顯示屬性阻止，您不必將圖像包裝在一個div爲中心。然而，汽車並沒有爲垂直集中div工作，如果它需要居中，你可以使用百分比（儘管我不確定這是否會導致不同分辨率的問題）。

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