CSS中圖片的垂直居中是我們常用的布局方式之一，下面我們來學習一下實現的方法。

第一種方法：使用CSS3的transform屬性。

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

這種方法利用了相對定位和translateY屬性來將圖片向上移動50%，再使用translateY將圖片向下移動50%的高度，從而實現垂直居中。

第二種方法：使用CSS3的flexbox布局。

.container {
display: flex;
justify-content: center;
align-items: center;
}
.container img {
max-width: 100%;
max-height: 100%;
}

這種方法使用了flexbox布局的justify-content屬性和align-items屬性，將圖片在容器內居中顯示。

第三種方法：使用絕對定位。

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

這種方法先將容器設為相對定位，再將圖片設為絕對定位，使用top屬性將圖片向上移動50%，再使用translateY屬性將圖片向下移動50%的高度，實現垂直居中。

以上三種方法都可以實現圖片垂直居中，選擇適合自己的方法來完成布局吧。