在CSS中，我們可以使用background-image屬性來為一個元素添加圖片背景，但是如果我們想要在HTML中插入一張圖片，并讓它居中顯示，應該怎么做呢？
首先，我們可以在HTML中插入一張圖片，如下所示：

<img src="image.jpg" alt="圖片" />

接下來，我們需要使用CSS來控制這張圖片的樣式。為了讓圖片居中顯示，我們可以使用如下的CSS代碼：

img {
display: block;
margin: 0 auto;
}

其中，display: block;的作用是將圖片變為塊級元素，使其可以被margin屬性控制。而margin: 0 auto;則是讓圖片在水平方向上居中顯示。
不過，需要注意的是，該方法僅適用于寬度已知的圖片。如果圖片寬度不確定，我們可以使用如下的CSS代碼：

img {
display: block;
margin: 0 auto;
max-width: 100%; /* 最大寬度為100% */
height: auto; /* 自動調整高度 */
}

通過設置max-width為100%和height為auto，可以讓圖片自適應容器大小，從而實現居中顯示的效果。
另外，如果我們想要在背景圖片中居中顯示一張小圖片，也可以使用CSS中的background-position屬性，如下所示：

div {
background-image: url('background.jpg');
background-position: center; /* 居中顯示 */
}

同時，為了避免小圖片被背景圖片覆蓋，我們可以使用background-size屬性將背景圖片縮小，如下所示：

div {
background-image: url('background.jpg');
background-position: center; /* 居中顯示 */
background-size: cover; /* 縮放背景圖片 */
}

總之，在CSS中實現圖片居中顯示有多種方法，我們可以根據具體需求選擇合適的方法來實現。