CSS中圖片的垂直居中是很常見的問題，本文將介紹一種行內（inline）圖片的垂直居中方法。

<div class="container">
<img src="img1.jpg" alt="圖片1">
<img src="img2.jpg" alt="圖片2">
</div>

上述代碼是一個包含兩張圖片的容器，假設圖片的大小是不定的，我們的目標是將它們垂直居中。

第一步是給容器設置樣式：

.container {
display: flex;  /*使用 flex 布局*/
align-items: center;  /*垂直居中*/
}

上述代碼中，我們使用了 flex 布局，并通過 align-items 屬性實現了垂直居中。

接下來添加圖片的樣式：

.container img {
margin: 0 auto;  /*水平居中，margin 上下值為 0*/
max-width: 100%;  /*圖片寬度不超過容器寬度*/
}

首先，我們將圖片的寬度設置為不超過容器寬度，這樣即使圖片本身比容器寬度還要小，也不會出現水平滾動條。

其次，圖片需要水平居中，我們使用 margin 屬性實現。由于我們已經在容器上設置了垂直居中，所以不需要再為圖片添加垂直方向的樣式。

通過以上步驟，我們實現了行內圖片的垂直居中，可以應用于導航菜單、圖文混排等場景。