在網頁設計中，常常需要將一張圖片居中顯示在頁面中央。CSS有多種方法可以實現這一效果。 首先，我們可以使用CSS的margin屬性來實現圖片居中。我們需要將圖片的左右margin設置成auto，這樣就能將其水平居中，然后再通過垂直方向的margin設置來實現豎直居中。以下是代碼示例：

img {
margin: auto; /* 設置左右margin為auto */
display: block; /* 讓圖片成為塊級元素 */
margin-top: 50px; /* 設置上下margin來實現豎直居中 */
margin-bottom: 50px;
}

另外一種方法是使用CSS的flexbox布局，這是一種強大的布局方式，可以輕松實現各種排版效果。以下是代碼示例：

.container {
display: flex; /* 設置為flex容器 */
justify-content: center; /* 水平居中 */
align-items: center; /* 豎直居中 */
}
img {
max-width: 100%; /* 設置圖片最大寬度為100% */
max-height: 100%; /* 設置圖片最大高度為100% */
}

最后，我們還可以使用CSS的position屬性來對圖片進行定位，將其居中。以下是代碼示例：

img {
position: absolute; /* 設置絕對定位 */
top: 50%; /* 設置頂部定位為50% */
left: 50%; /* 設置左側定位為50% */
transform: translate(-50%, -50%); /* 通過transform屬性進行微調，將圖片居中 */
}

總之，以上就是CSS實現圖片居中的幾種方法，可以根據自己的需求來選擇相應的方式。