在CSS中，設(shè)置圖片垂直居中顯示是一個(gè)常見(jiàn)的需求，下面是一些實(shí)現(xiàn)圖片垂直居中的方法：

1、使用flex布局：

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

在這個(gè)例子中，align-items: center; 使得子元素在垂直方向上居中，而justify-content: center; 則使得子元素在水平方向上居中，這種方法非常靈活，可以應(yīng)用于多種布局場(chǎng)景。

2、使用grid布局：

.container {
  display: grid;
  align-items: center;
  justify-content: center;
}

與flex布局類(lèi)似，grid布局也提供了強(qiáng)大的居中功能，通過(guò)align-items 和justify-content 屬性，可以輕松實(shí)現(xiàn)圖片的垂直和水平居中。

3、使用position和transform屬性：

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

這種方法通過(guò)position: absolute; 將圖片相對(duì)于其***近的定位祖先（在本例中為.container）進(jìn)行定位，通過(guò)top: 50%; 和left: 50%; 將圖片的邊緣移動(dòng)到容器的中心。transform: translate(-50%, -50%); 將圖片的中心移動(dòng)到容器的中心，這種方法可以實(shí)現(xiàn)圖片的***居中。

是三種常見(jiàn)的設(shè)置圖片垂直居中的方法，你可以根據(jù)自己的需求和布局場(chǎng)景選擇***適合的方法。