CSS是一種用于網頁設計和頁面布局的語言。它可以很好地控制網頁的樣式和排版效果。而當我們在設計網頁的時候，經常需要將圖片垂直居中顯示。下面就來介紹一下如何使用CSS實現圖片垂直居中。

首先，我們在HTML中使用img標簽來插入圖片，并將其放在一個div容器內。為了讓圖片垂直居中，我們需要給這個容器設置一定的高度。在CSS中，我們可以使用height屬性來設置盒子的高度。

<div class="box">
<img src="示例圖片.jpg" alt="示例圖片">
</div>
.box {
height: 400px;
}

接著，在樣式中給img標簽添加margin屬性，并設置為auto。這樣就可以使圖片水平居中顯示。接下來，我們需要將圖片垂直居中。這可以通過設置圖片的定位來實現。我們將圖片的position屬性設置為absolute，再設置top和bottom屬性為0，這樣就可以讓圖片垂直居中了。

.box {
height: 400px;
position: relative;
}
.box img {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
}

上面的代碼中，我們通過設置盒子的position為relative，再將img標簽的position屬性設置為absolute，使得圖片可以相對于盒子定位。并通過top和bottom屬性來使圖片垂直居中。

綜上所述，通過設置CSS樣式中的盒子高度、圖片margin以及定位屬性，即可實現圖片垂直居中了。