CSS背景定位可以幫助我們在網頁中輕松的顯示圖片，同時也可以通過背景定位讓圖片居中顯示。下面我們就具體學習一下如何實現CSS背景定位居中顯示圖片。

/* 針對背景圖片 */
.background {
background-image: url('URL');
background-repeat: no-repeat; /* 防止重復顯示 */
background-position: center center; /* 垂直和水平坐標都居中 */
}
/* 針對背景顏色 */
.background {
background-color: #ffffff;
display: flex; /* 開啟flex布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}

使用background-position屬性來居中圖片，這個屬性可以設置水平和垂直的位置。如果兩個坐標都設置為center，就會使圖片水平和垂直都居中。

當我們不是在背景圖片上顯示圖片，而是在背景顏色上顯示圖片時，可以使用flex布局來控制圖片的垂直和水平居中。通過給父元素設置display為flex，并設置align-items和justify-content為center，就可以輕松實現圖片的居中顯示。

以上就是CSS背景定位居中顯示圖片的實現方法，希望對大家有所幫助。