在網頁設計中，背景圖起到了很重要的作用，他能夠為網頁增色不少，同時也能夠帶來更好的用戶體驗。在使用CSS添加背景圖時，常常會出現圖片過大或過小的情況，如果對其進行適當的尺寸調整可以使整個頁面更加美觀。在本篇文章中，我將會介紹如何使用CSS讓背景圖的尺寸居中顯示。 首先，我們需要在CSS文件中設置背景圖，代碼如下所示：

body {
background-image: url("your-background-image-link");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

其中，background-image屬性指定了你需要添加的背景圖URL，background-size屬性則是控制背景圖的尺寸，這里我們使用contain，表示當背景圖過大時會自動縮小至適合的尺寸。background-repeat屬性用于控制背景圖是否需要平鋪，這里我們將其設置為no-repeat，也就是說我們不需要重復顯示背景圖。最后一個屬性background-position，用于控制背景圖在頁面中的位置。 接下來，我們需要通過CSS樣式表中的下列代碼，將背景圖居中顯示：

html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}

首先，我們需要將頁面的html和body元素高度更改為100%，而后使用margin屬性將所有元素外邊距重置為0，以防出現任何不必要的空隙。然后，將body元素的display屬性設置為flexbox，可以實現更好的定位和布局。而justify-content屬性和align-items屬性則分別用于控制背景圖水平和垂直方向的居中。 綜上所述，我們可以使用上述代碼實現CSS背景圖尺寸的居中顯示。 通過合適的樣式設置，我們不僅能夠使網頁看起來更美觀，而且能夠提高用戶體驗。