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;
}

以上代码即可实现图片垂直水平居中。