今天我想和大家分享一下在CSS中如何實現圖片的垂直方向居中。 首先，我們需要有一個需要居中的圖片。為了方便演示，我創建了一個div容器，并將其寬度設置為500像素、高度設置為200像素，背景色設置為灰色。將需要居中的圖片放入這個容器中。 接下來，我們為這個容器設置display:flex，這將使得這個容器中的所有元素都變成了flex元素。 然后，我們為這個容器設置align-items:center，這將使得所有flex子元素在垂直方向上都居中顯示。 最后，我們可以通過調整padding值來增加圖片與容器頂部和底部的距離。 下面是完整的CSS代碼

div {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
width: 500px;
background-color: grey;
padding: 20px;
}
img {
max-width: 100%;
max-height: 100%;
}

在這里，我使用了justify-content:center來水平居中圖片，但由于圖片已經設置了最大寬度和最大高度，所以即使沒有這個樣式，圖片也會自動水平居中。 希望這篇文章能夠幫助到大家實現圖片的垂直方向居中。如果您有任何問題或建議，請在評論區留言并分享您的見解。