CSS是網(wǎng)頁(yè)制作中不可或缺的一部分，利用它可以實(shí)現(xiàn)各種樣式效果。在網(wǎng)頁(yè)中，經(jīng)常需要將圖片居中顯示，接下來(lái)介紹一下如何利用CSS實(shí)現(xiàn)圖片居中顯示。

.img-box {
display: flex; /* 使用 flex 布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.img {
width: 300px;
height: 200px;
}

如上面代碼所示，首先需要給圖片容器元素添加flex布局，然后使用justify-content和align-items屬性來(lái)實(shí)現(xiàn)水平和垂直居中。

下面是HTML代碼：

<div class="img-box">
<img src="example.jpg" alt="example" class="img">
</div>

在HTML中，將圖片放在一個(gè)div元素中，這個(gè)div元素即是我們上面提到的圖片容器元素。然后給圖片添加一個(gè)img類，設(shè)定圖片的寬度和高度。

同時(shí)，還可以通過(guò)設(shè)置圖片容器的寬度和高度，使得圖片和容器的尺寸一致，從而讓圖片完全居中。效果如下：

.img-box {
display: flex; /* 使用 flex 布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 300px; 
height: 200px;
}
.img {
width: 100%;
height: 100%;
}

上述代碼中，我們給圖片容器設(shè)定了寬度和高度，讓它與圖片尺寸相同。然后再將圖片的寬度和高度都設(shè)置為100%，即可完美居中顯示。

總的來(lái)說(shuō)，使用CSS可以很方便地實(shí)現(xiàn)圖片的居中顯示，運(yùn)用flex布局即可做到垂直和水平居中。