在網頁設計中，圖片是一個非常重要的元素。我們經常需要將圖片垂直居中，以便頁面效果更加美觀。下面就來介紹一些使用CSS實現圖片垂直居中的方法。

第一種方法是使用display: flex;屬性。將父容器的display屬性設為 flex，再通過 align-items 和 justify-content 屬性來實現圖片的垂直居中。代碼如下：

.parent {
display: flex;
align-items: center;
justify-content: center;
}
.child {
max-width: 100%;
height: auto;
}

第二種方法是使用position: absolute;屬性。將父容器的position屬性設為 relative，再通過 top 和 left 屬性來實現圖片的垂直居中。代碼如下：

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
height: auto;
}

第三種方法是使用display: table;和display: table-cell;屬性。將父容器設為 table，將子容器設為 table-cell，并將子容器的 vertical-align 屬性設為 middle，即可實現圖片的垂直居中。代碼如下：

.parent {
display: table;
width: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
max-width: 100%;
height: auto;
}

以上就是三種實現CSS圖片垂直居中的方法。可以根據具體情況選擇不同的方法進行實現。