本文目錄導(dǎo)讀：

1. 使用CSS Flexbox布局
2. 使用CSS Grid布局
3. 使用CSS定位和transform屬性

在網(wǎng)頁(yè)設(shè)計(jì)中，實(shí)現(xiàn)圖片的垂直居中顯示是一個(gè)常見(jiàn)的需求，雖然不直接涉及關(guān)鍵詞，但以下將介紹幾種在CSS中實(shí)現(xiàn)圖片垂直居中的方法。

使用CSS Flexbox布局

Flexbox布局是一種強(qiáng)大的CSS布局方式，可以輕松實(shí)現(xiàn)元素的垂直居中，對(duì)于圖片，我們可以將包含圖片的容器設(shè)置為flex容器，并使用justify-content和align-items屬性來(lái)實(shí)現(xiàn)居中，示例代碼如下：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 確保容器有足夠的高度 */
}

此方法適用于所有現(xiàn)代瀏覽器。

使用CSS Grid布局

CSS Grid布局是另一種強(qiáng)大的布局方式，同樣可以實(shí)現(xiàn)圖片的垂直居中，我們可以將包含圖片的容器設(shè)置為grid容器，并使用place-items屬性來(lái)實(shí)現(xiàn)居中，示例代碼如下：

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

CSS Grid布局同樣適用于所有現(xiàn)代瀏覽器。

使用CSS定位和transform屬性

對(duì)于不支持Flexbox或Grid的舊瀏覽器，我們可以使用定位和transform屬性來(lái)實(shí)現(xiàn)圖片的垂直居中，將圖片設(shè)置為***定位，然后將其top屬性設(shè)置為50%，這將使圖片在垂直方向上移動(dòng)到容器的中心，使用transform屬性中的translateY函數(shù)將其向上移動(dòng)其自身高度的一半，從而實(shí)現(xiàn)完全居中，示例代碼如下：

.container {
  position: relative; /* 使***定位的子元素相對(duì)于此容器定位 */
}
img {
  position: absolute; /* ***定位圖片 */
  top: 50%; /* 將圖片向上移動(dòng)到容器的中心 */
  transform: translateY(-50%); /* 將圖片向上移動(dòng)其自身高度的一半 */
}
```此方法需要計(jì)算容器的具體高度和圖片的相對(duì)位置，對(duì)于動(dòng)態(tài)高度的容器或不同大小的圖片，可能需要額外的處理。