CSS控制圖片上下居中的方法有很多，下面介紹兩種常用的方法。

方法一：使用絕對定位和居中標簽

使用絕對定位可以將其放置在頁面的合適位置，并且可以使用居中標簽將其居中。具體步驟如下：

1. 在HTML中添加一個圖片元素，并使用絕對定位將其放置在頁面的中心位置。

2. 在CSS中添加一個居中標簽，并將其設置為該圖片元素的父元素。

.居中 {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

3. 確保圖片元素具有正確的大小和位置，以確保其居中效果。

width: 100%;

height: auto;

方法二：使用transform屬性

使用transform屬性可以控制元素的位置和大小，并將其居中。具體步驟如下：

1. 在HTML中添加一個圖片元素，并使用transform屬性將其居中。

2. 在CSS中添加一個居中標簽，并將其設置為該圖片元素的父元素。

.居中 {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

3. 確保圖片元素具有正確的大小和位置，以確保其居中效果。

width: 100%;

height: auto;

無論哪種方法，都可以使用CSS來控制圖片的上下居中效果，并且可以靈活地調整圖片的大小和位置。