CSS是前端開發中不可或缺的一部分，其中圖片也是經常被使用的元素之一。然而，在布局中，經常需要將圖片垂直居中，下面我們介紹一些方法。

第一種是使用flex布局實現圖片垂直居中。

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

上述代碼中，使用了align-items屬性將圖片容器垂直居中，justify-content屬性將圖片水平居中，同時設置了圖片的最大寬度和高度，保證圖片不會超出容器的大小。

第二種是使用相對定位和負邊距來實現圖片垂直居中。

.container{
position: relative;
}
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}

上述代碼中，container需要設置為相對定位，圖片使用絕對定位，并利用transform屬性來進行居中。這種方法需要設置圖片的最大寬度和高度，否則圖片可能出現變形。

第三種是使用table布局來實現圖片垂直居中。

.container{
display: table-cell;
vertical-align: middle;
}
img{
max-width: 100%;
max-height: 100%;
}

上述代碼中，使用display屬性將container設置為table-cell，同時利用vertical-align屬性來將圖片垂直居中，同樣需要設置圖片的最大寬度和高度。

總之，以上三種方法都可以實現圖片的垂直居中，開發者可以根據具體需求來選擇使用哪種方法。