CSS實現圖片居中不變形是前端開發中的一個常見需求，下面就介紹一些實現方法。

方法一：使用CSS的background屬性

.center {
width: 100%;
height: 300px;
background: url("圖片路徑") no-repeat center center/cover;
}

此方法將圖片作為background背景來展示，利用了background的屬性值no-repeat、center和cover，通過設置這些值可以實現圖片居中裁剪顯示。

方法二：使用CSS的flex布局

.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.center {
max-width: 100%;
max-height: 100%;
}

此方法的核心是使用flex布局，通過設置container容器為flex布局，并讓其中的元素垂直水平居中對齊。同時給圖片設置max-width和max-height的值為100%，保證圖片不會變形。

方法三：使用絕對定位

.container {
width: 100%;
height: 300px;
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}

此方法是將圖片設置為絕對定位，并設置top和left的值為50%讓圖片居中，同時利用transform屬性對圖片進行位移，保證不變形。同樣，也需要給圖片設置max-width和max-height的值為100%。

總之，在實現圖片居中的過程中，需要注意圖片不變形的問題，在選擇方法的時候要根據具體情況選擇最為適合的方法。