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

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

2. 設(shè)置容器的display屬性為flex。使用flex布局可實現(xiàn)容器內(nèi)元素的垂直和水平居中。

3. 設(shè)置垂直居中。使用align-items屬性可實現(xiàn)垂直居中。設(shè)置為center，即可讓圖片垂直居中。

4. 設(shè)置水平居中。使用justify-content屬性可實現(xiàn)水平居中。設(shè)置為center，即可讓圖片水平居中。

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

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

以上代碼即可實現(xiàn)圖片垂直水平居中。