CSS 在實現圖像上下居中方面非常強大。下面我們將介紹兩種最常見的方法。

第一種方法是使用絕對定位 position 和 transform 屬性。首先，我們需要將圖像的父元素設置為相對定位。然后，將圖像設置為絕對定位，并使用 top 和 left 屬性將其放置在父元素的中心。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

第二種方法使用 display 和 vertical-align 屬性。我們將圖像的父元素設置為表格單元格，將圖像設置為表格單元格中的行內元素。然后，將垂直對齊方式設置為居中。

.parent {
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}

我們可以使用這兩種方法中的任意一種在網站布局中輕松地實現圖像的上下居中。當然，還有其他一些方法可以實現此效果，但這兩種是最常用的。