CSS中的圖片居中顯示是一個經常遭遇的問題，特別是當圖片的寬度和高度與父元素的尺寸不一致時。然而，通過使用CSS中的一些技巧和屬性，我們可以輕松地將圖片居中顯示。

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

我們可以利用CSS中的margin屬性和自動對齊技術來實現水平居中。為了實現這個效果，我們需要給img元素設置display: block;屬性，因為這樣才可以通過margin屬性來實現居中。接下來，我們賦予margin屬性一個值，通過將左右邊距設置為auto，我們可以使圖片在水平方向上居中顯示。

.parent {
display: flex;
justify-content: center;
align-items: center;
}
.parent img {
max-width: 100%;
max-height: 100%;
}

另一種方法是使用flexbox。我們可以將img元素與其父元素放在一個Flex容器內，然后使用以下代碼實現居中顯示。我們需要在父元素上應用display: flex;， 這樣我們才能使用justify-content和align-items屬性使圖片在水平和垂直方向上居中。同時，在img元素上設置最大寬度和最大高度100%可以使圖片保持其原始比例。

總之，這兩種方法都可以使用，選擇哪種方法主要取決于你的喜好和實際情況。希望這篇文章能夠幫助你輕松地實現圖片居中顯示，讓你的頁面更美觀。