在現代網站開發中，圖片展示是非常重要的一部分。經常我們需要在網頁上展示圖片，而且我們希望這些圖片能夠適應瀏覽器窗口大小，并且居中展示。下面就是一些常用的CSS代碼，可以實現圖片網頁面居中的效果。 首先，我們需要給圖片添加一個外層容器，設定容器的寬度和高度，并且將圖片設置為容器的背景圖片。

<div class="container">
<div class="image"></div>
</div>

.container {
width: 100%;
height: 600px;
}
.image {
background: url("image.jpg") no-repeat center center / cover;
width: 100%;
height: 100%;
}

上面的代碼中，我們將圖片設置為容器的背景圖片，同時將圖片平鋪方式設為不平鋪，以及圖片的位置居中。接下來，我們需要將圖片居中顯示，用到的代碼如下：

.image {
background: url("image.jpg") no-repeat center center / cover;
width: 100%;
height: 100%;
/* 將圖片居中 */
display: flex;
justify-content: center;
align-items: center;
}

上面的代碼中，我們使用了CSS的flex布局方式，將容器內的元素垂直居中和水平居中。另外，我們也可以使用CSS的absolute屬性來將圖片居中：

.container {
position: relative;
width: 100%;
height: 600px;
}
.image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}

上面的代碼中，我們將容器的position屬性設置為relative，表示相對定位。接著，我們將圖片的position屬性設置為absolute，以便可以在容器中進行定位。接著，我們使用CSS的translate屬性將圖片居中顯示。 無論是使用flex布局還是absolute屬性，都可以實現圖片居中顯示的效果。不過，開發者需根據實際情況，選擇合適的方式來實現。