在網頁設計中，垂直居中顯示圖像是一個常見的需求。在CSS中，我們可以使用一些技巧來實現這一功能。下面是一些示例代碼，供大家參考。

/* 方法1：使用flexbox */
.parent {
display: flex;
align-items: center;
justify-content: center;
}
/* 方法2：使用absolute和margin */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 方法3：使用line-height */
.parent {
height: 200px; /* 垂直居中的元素所在的父元素必須指定一個高度 */
line-height: 200px;
}
.child {
display: inline-block;
vertical-align: middle;
}
/* 方法4：使用table和table-cell */
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
/* 方法5：使用grid */
.parent {
display: grid;
}
.child {
align-self: center;
justify-self: center;
}

以上是五種常見的垂直居中顯示圖片的方案。每種方案都有其適用場景，具體使用時需要根據實際情況選擇。希望這篇文章能夠對大家有所幫助。