在網頁設計中，圖片的垂直居中一直都是一個比較棘手的問題。而在CSS中實現圖片垂直居中，有很多方式可供選擇。下面是一些方法的介紹。

.container {
display: flex;
justify-content: center;
align-items: center;
}

這種方法會使用flex布局。我們將容器的display設置為flex，同時使用justify-content和align-items將元素居中。這種方式適用于要求較為簡單的情況。

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

這種方法使用了絕對定位，先將容器設置為相對定位，然后將子元素使用絕對定位并通過top和transform將其垂直居中。這種方法也比較簡單，同時適用于多種場合。

.container {
display: table-cell;
vertical-align: middle;
}
.image {
display: inline-block;
vertical-align: middle;
}

這種方法使用了display:table-cell屬性和vertical-align屬性。將容器的display設置為table-cell，將子元素使用inline-block，并將它們的vertical-align設置為middle。這種方法類似于表格布局，也比較常用。

綜上所述，CSS實現圖片垂直居中有很多方式。需要根據具體情況進行選擇。以上三種方法均可以實現圖片垂直居中，同時可以根據需要進行適當的修改和調整。