在網頁設計中，經常需要對圖片進行垂直居中的處理，這在傳統的HTML標簽中實現起來并不容易，但在CSS中，通過一些簡單的操作，就可以輕松實現。

img{
display: block;/*將圖片轉為塊級元素*/
margin: 0 auto;/*設置左右間距為auto，實現水平居中*/
max-width: 100%;/*設置圖片最大寬度不超出容器*/
height: auto;/*保持圖片寬高比例*/
position: relative;/*相對定位，為了能夠使用absolute位置*/
}
img:before{
content: "";/*偽元素，使得img元素能夠使用absolute定位*/
display: inline-block;/*保證偽元素能夠垂直居中*/
height: 100%;/*設置高度為100%*/
vertical-align: middle;/*設置垂直對齊為中間*/
}
img:after{
content: "";/*偽元素，使得img元素能夠使用absolute定位*/
display: inline-block;/*保證偽元素能夠垂直居中*/
height: 100%;/*設置高度為100%*/
vertical-align: middle;/*設置垂直對齊為中間*/
}

通過以上CSS代碼，讓圖片元素實現相對定位，使用偽元素before和after實現垂直居中。需要注意的是，該方法僅適用于圖片與容器寬度相同的情況。如果容器寬度小于圖片寬度，則需要使用其他方法實現圖片的垂直居中。