在進行網頁設計時，圖片的排版和布局也是很重要的一部分。其中，將圖片上下居中是一項常見的需求，通過CSS對圖片進行控制可以輕松實現。接下來，我們就來看一下相關的CSS代碼，幫助大家掌握圖片上下居中的方法。

img{
display: block;
margin: 0 auto;
}

其中，display屬性用于設置元素的顯示類型，block類型會使元素以塊狀形式顯示，從而占用整行區域。而margin屬性則用于設置元素周圍的間距，在這里居中的方式便是設置左右外邊距為auto，從而使圖片在容器中水平居中。

.parent{
display: flex;
justify-content: center;
align-items: center;
}

這個方法則是通過使用彈性盒子模型的方式，將圖片上下居中。其中，.parent為圖片所在的父元素，display屬性設置為flex即采用彈性盒子模型。justify-content屬性用于設置彈性盒子沿主軸方向（水平方向）對齊方式，這里設置為center即水平居中。而align-items則用于設置彈性盒子沿交叉軸方向（豎直方向）對齊方式，這里也設置為center即豎直居中。

總的來說，通過CSS設置圖片上下居中并不是很難，大家只需要根據自身的實際情況選擇適合的方法就可以了。希望今天的分享對大家有所幫助，謝謝！