在我們的Web開發(fā)中，有許多方法可以使一張圖片始終保持在窗口的中間，而CSS是其中最常用的方式之一。

img {
display: block; /*這一行使圖片以塊級元素形式顯示*/
margin: auto; /*這一行使左右外邊距都為auto，將圖片水平居中*/
}

以上代碼將圖片以塊級元素形式顯示，隨后設(shè)置左右外邊距為auto，使圖片水平居中。但是這樣還沒有完全居中，因?yàn)檫€需要垂直居中。

下面是一種常用的實(shí)現(xiàn)方式，利用CSS的偽元素：

.container {
position: relative;
}
.container img {
position: absolute;
top: 50%; /*將圖片位置調(diào)整到頁面的一半處*/
transform: translateY(-50%); /*沿Y軸向上移動圖片高度的一半*/
}

以上代碼中，將容器元素的position屬性設(shè)為relative，使其成為圖片的相對定位參考系。然后將圖片的position屬性設(shè)為absolute，讓其脫離文檔流。將top屬性設(shè)為50%將圖片位置調(diào)整到頁面一半處，再通過transform: translateY(-50%)上移圖片高度的一半，則可實(shí)現(xiàn)圖片在窗口的中間位置。

總之，以上兩種方式都可以使圖片保持在窗口中間，不同的是第二種方式不僅水平居中，還垂直居中，比較完美。