将图片垂直居中可以应用 CSS 垂直居中的方法，以下是一些常见的实现方式
使用 flex 布局
将包含图片的元素设置为 flex 容器，使用 align-items 属性将图片垂直居中。
.container {
display: flex;
align-items: center;
}
使用绝对定位和 transform
将图片设置为绝对定位，使用 transform 技术将图片向上移动一半高度即可实现垂直居中。
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
使用 line-height
将包含图片的元素的 line-height 属性设置为与元素高度相等，然后将图片的 vertical-align 属性设置为 middle。
.container {
height: 300px;
line-height: 300px;
}
img {
vertical-align: middle;
}
使用表格布局
将包含图片的元素设置为 table 和 table-cell 属性，使用 vertical-align 属性将图片垂直居中。
.container {
display: table;
height: 300px;
}
img {
display: table-cell;
vertical-align: middle;
}
需要注意的是，以上的实现方式都基于包含图片的父元素是已知高度的情况。如果父元素高度未知，则可以使用 JavaScript 或 CSS Grid 等技术实现图片垂直居中。