CSS圖片垂直居中需遵循以下幾個步驟：

1. 設置容器的高度和寬度。圖片垂直居中所需的父容器需設置固定的高度和寬度，否則無法實現垂直居中效果。

2. 設置容器的display屬性為flex。使用flex布局可實現容器內元素的垂直和水平居中。

3. 設置垂直居中。使用align-items屬性可實現垂直居中。設置為center，即可讓圖片垂直居中。

4. 設置水平居中。使用justify-content屬性可實現水平居中。設置為center，即可讓圖片水平居中。

5. 設置圖片。使用background屬性可設置圖片作為元素的背景。在此基礎上，可設置size、position等屬性調整圖片大小和位置。

.container {
height: 300px;
width: 300px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("圖片路徑");
background-size: cover;
background-position: center;
}

以上代碼即可實現圖片垂直水平居中。