CSS居中不變形縮略圖是一種常見的實用技巧，具有很好的用戶體驗。在網站設計中，縮略圖可以讓用戶快速瀏覽和找到所需內容，提高用戶的滿意度。然而，在縮略圖的制作過程中，常常遇到圖片變形等問題。以下是一種CSS居中不變形縮略圖的實現方法，供大家參考。

.thumbnail {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.thumbnail img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: none;
max-height: none;
width: auto;
height: auto;
}

首先，我們需要創建一個包含縮略圖的容器，給容器設定寬度和高度，以及相對定位和超出部分隱藏。

當縮略圖超過容器大小時，我們需要將圖片置于容器的中心位置，保證居中效果。這時候，我們需要給圖片絕對定位，并且通過"top: 50%; left: 50%;"將圖片向右下角偏移了一半的位置。"translate(-50%, -50%)"將圖片向左上角偏移了一半的位置，再加上“max-width: none; max-height: none; width: auto; height: auto;”可以保證圖片不會變形，適應容器大小。

以上CSS代碼實現了居中不變形縮略圖的效果，可以在實際開發中應用。