在网页设计中，图片的垂直居中是一个常见的需求，无论是响应式布局还是固定布局，我们都需要确保图片在容器中垂直居中，CSS提供了多种方法来实现图片的垂直居中，本文将介绍其中的几种常用方法。
1、使用flexbox布局
Flexbox是CSS3新增的一种布局模式，可以轻松实现元素的垂直居中，要使用flexbox实现图片垂直居中，首先需要将容器的display属性设置为flex，然后设置justify-content和align-items属性为center。
.container {
display: flex;
justify-content: center;
align-items: center;
}
2、使用grid布局
Grid布局是另一种CSS3新增的布局模式，也可以实现图片的垂直居中，要使用grid布局实现图片垂直居中，首先需要将容器的display属性设置为grid，然后设置justify-items和align-items属性为center。
.container {
display: grid;
justify-items: center;
align-items: center;
}
3、使用position和transform属性
这种方法通过将图片的position属性设置为absolute，然后使用transform属性的translateY方法将图片向上移动其高度的一半，从而实现垂直居中，需要注意的是，这种方法需要知道图片的高度。
.container {
position: relative;
}
.container img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
4、使用line-height属性
这种方法适用于容器的高度已知且固定的场景，通过将容器的line-height属性设置为与容器高度相同的值，然后将图片的vertical-align属性设置为middle，可以实现图片的垂直居中，需要注意的是，这种方法只适用于单行文本的场景。
.container {
height: 300px; /* 容器高度 */
line-height: 300px; /* 与容器高度相同 */
}
.container img {
vertical-align: middle; /* 垂直居中 */
}
5、使用table-cell和vertical-align属性
这种方法同样适用于容器的高度已知且固定的场景，通过将容器的display属性设置为table-cell，然后将图片的vertical-align属性设置为middle，可以实现图片的垂直居中，需要注意的是，这种方法只适用于单行文本的场景。
.container {
display: table-cell; /* 容器显示为表格单元格 */
height: 300px; /* 容器高度 */
vertical-align: middle; /* 垂直居中 */
}
6、使用伪元素：:before或：:after
这种方法通过在容器内添加一个与图片大小相同的伪元素，并将其垂直位置设置为负的图片高度的一半，从而实现图片的垂直居中，需要注意的是，这种方法只适用于容器的高度已知且固定的场景。
.container {
position: relative; /* 相对定位 */
height: 300px; /* 容器高度 */
}
.container::before {
content: ""; /* 空内容 */
display: block; /* 块级元素 */
width: 100%; /* 宽度与容器相同 */
height: 0; /* 高度为0 */
position: absolute; /* 绝对定位 */
top: 50%; /* 垂直居中 */
}
.container > * { /* 如果容器内有其他元素，需要将其覆盖 */
position: relative; /* 相对定位 */
}
7、使用text-align属性（仅适用于单行文本）
这种方法通过将容器的text-align属性设置为center，可以实现图片的垂直居中，需要注意的是，这种方法只适用于单行文本的场景，这种方法可能会导致文本换行不美观。
.container {
text-align: center; /* 文本水平居中 */
}
以上就是CSS实现图片垂直居中的几种常用方法，不同的方法适用于不同的场景，可以根据实际需求选择合适的方法，需要注意的是，有些方法只适用于特定的场景，例如单行文本、固定高度等，在使用这些方法时，请确保了解其适用条件。