CSS是網(wǎng)頁設(shè)計(jì)中不可或缺的一部分，它能為網(wǎng)頁添加美觀的外觀和交互效果。其中，控制圖片的對齊方式也是 CSS 中的重點(diǎn)內(nèi)容之一。本文將重點(diǎn)介紹如何使用 CSS 實(shí)現(xiàn)圖片上下居中。

img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

上述代碼可以實(shí)現(xiàn)將圖片垂直居中。其中，position: absolute;將圖片從文檔流中取出，并使其相對于其父元素為絕對定位；top: 50%;將圖片相對于其父元素頂部的距離設(shè)置為50%；transform: translateY(-50%);使用 CSS3 中的transform屬性將圖片沿Y軸上下移動，移動的距離為圖片本身高度的50%。

需要注意的是，在使用上述代碼時，需要保證父元素的高度不小于圖片的高度，否則圖片會超出父元素的邊界。

總結(jié)一下，使用 CSS 控制圖片上下居中可以通過設(shè)置圖片為絕對定位，然后結(jié)合top:50%和transform: translateY(-50%)實(shí)現(xiàn)。這樣，你的網(wǎng)頁中的圖片就可以美美的顯示啦！