CSS中的圖片等比縮放和居中顯示，是一種非常實用的技術，可以有效地優化網站的顯示效果，提升用戶的體驗和滿意度。下面我們將詳細介紹如何實現CSS圖片等比縮放和居中顯示。

/* 設置圖片大小和位置 */
img {
max-width: 100%; /* 圖片最大寬度為100% */
height: auto; /* 高度自動 */
display: block; /* 顯示為塊級元素 */
margin: 0 auto; /* 居中顯示 */
}

以上代碼中，我們首先設置了圖片的最大寬度為100%，即圖片不會超出其容器的寬度，保證了圖片不會出現變形和失真的問題。同時，高度設置為自動，讓圖片根據其寬度按比例縮放，保證了圖片的等比縮放效果。

接著，我們將圖片的display屬性設置為block，使其成為塊級元素，從而占據整個容器的寬度，而不是像默認的inline元素一樣只占據其自身的寬度，從而保證了圖片可以在容器中居中顯示。

最后，我們用margin屬性將圖片垂直和水平方向上都設置為auto，這樣圖片就可以很方便地居中顯示。

總結起來，CSS圖片等比縮放和居中顯示可以通過簡單的CSS代碼實現，具有非常好的效果，并且可以應用于絕大部分網站頁面中，是一種非常實用的技術。在實際開發中，我們可以根據不同的需求和實際情況進行調整和優化，以達到更好的效果。