在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，圖片的排版和布局也是很重要的一部分。其中，將圖片上下居中是一項(xiàng)常見的需求，通過CSS對(duì)圖片進(jìn)行控制可以輕松實(shí)現(xiàn)。接下來，我們就來看一下相關(guān)的CSS代碼，幫助大家掌握?qǐng)D片上下居中的方法。

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

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

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

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

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