在網頁設計過程中，很多時候需要對圖片進行豎向居中布局，這時我們可以使用CSS來實現這個效果。具體步驟如下：

img {
display: block;
margin: auto;
}

以上代碼中，我們將圖片的display屬性設置為block，這是因為只有block元素才能設置margin屬性。接著，我們將margin屬性設置為auto，這樣就可以實現圖片在其包含元素中水平、垂直居中的效果。

但是，以上代碼只能將圖片水平、垂直居中，如果我們想要保持圖片的長寬比例不變的情況下垂直居中呢？這時我們可以使用一個絕對定位的技巧，具體步驟如下：

.container {
position: relative;
}
.container img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上代碼中，我們首先將包含圖片的容器設置為相對定位的，這是為了給圖片絕對定位提供一個相對的參照物。接著，我們設置圖片的position屬性為absolute，這樣圖片就可以相對于其容器進行定位。然后，我們將圖片的top屬性設置為50%，這樣圖片就會向下偏移50%的距離。但是，由于偏移的距離是相對于容器高度的，所以圖片只是偏移了一部分。我們繼續使用transform屬性中的translateY函數將圖片向上移動50%的距離，從而實現了圖片的垂直居中。

通過以上兩種方法，我們可以輕松地實現圖片的居中布局，而且還能保持圖片的原始長寬比例。