CSS中的圖片垂直居中是一個常見的問題，本文將詳細介紹如何使用CSS實現該功能。
首先，我們需要了解兩個CSS屬性：display和vertical-align。
display：inline-block; vertical-align：middle;
上面兩個屬性，是CSS實現圖片垂直居中的關鍵。其中，display：inline-block；是將圖片變成一個文本流中的行內元素。而vertical-align：middle；則是讓該行內元素處于其容器的中間位置。
下面通過一個例子來闡述上述的實現方法。
<!DOCTYPE html>
<html>
<head>
<title>CSS圖片垂直居中</title>
<style>
#container{
width:800px;height:400px;border:1px solid #ccc;
display:flex;justify-content:center;align-items:center;
}
#img{
display:inline-block;vertical-align:middle;
}
</style>
</head>
<body>
<div id="container">
<img id="img" src="http://example.com/example.jpg" alt="example" />
</div>
</body>
</html>上述代碼中，容器#container采用了flex布局，并且使用justify-content：center；和align-items：center；兩個屬性將圖片水平和垂直居中。而圖片本身則使用display：inline-block；和vertical-align：middle；兩個屬性實現垂直居中。
以上就是CSS圖片垂直居中的詳細介紹。讀者可以使用該方法實現圖片的垂直居中，提高網站的美觀度。