在網頁設計中，圖片是一個非常重要的元素，經常出現在網頁中，為網頁增加美感和吸引力。但是，在實際的開發中，我們經常會遇到一個問題：如何讓圖片在頁面中居中顯示。本文將介紹一種基于CSS的方法來實現居中顯示圖片的效果。

/* 定義圖片的父元素 */
.image-container {
/* 設置父元素為相對定位 */
position: relative;
}
/* 定義圖片元素 */
.image {
/* 設置圖片元素為絕對定位 */
position: absolute;
/* 設置水平和垂直居中 */
top: 50%;
left: 50%;
/* 使用transform屬性對圖片位置進行微調 */
transform: translate(-50%, -50%);
}

上面這段CSS代碼定義了圖片元素的位置。首先，我們將圖片的父元素設置為相對定位，這樣在后面圖片元素的絕對定位時，會以父元素為參考進行定位。

然后，我們定義了圖片元素的位置。首先使用top: 50%和left: 50%將圖片移到了頁面的中心位置，但是這樣圖片只是偏移了自身寬高的一半，還需要使用transform屬性進行微調。translate(-50%, -50%)會將圖片向左和向上移動自身寬高的一半，使其完全居中顯示。

使用以上代碼，你可以方便地實現圖片在頁面中居中顯示的效果。