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

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

CSS技巧：實(shí)現(xiàn)圖片垂直居中顯示

在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，使用CSS來使圖片在容器中上下居中顯示是一個(gè)常見的需求，下面我們將介紹幾種實(shí)現(xiàn)這一效果的方法。

使用Flex布局

Flex布局是一種強(qiáng)大的CSS布局方式，可以輕松實(shí)現(xiàn)元素的垂直居中，要使圖片在容器中上下居中顯示，可以將容器設(shè)置為Flex布局，并使用以下樣式：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

使用Grid布局

CSS Grid布局是另一種實(shí)現(xiàn)元素居中的有效方式，與Flex布局類似，可以將容器設(shè)置為Grid布局，并使用以下樣式實(shí)現(xiàn)圖片的垂直居中：

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

使用定位和transform屬性

除了使用Flex和Grid布局，還可以使用定位和transform屬性來實(shí)現(xiàn)圖片的垂直居中，具體做法是將圖片相對(duì)于容器定位，然后使用transform屬性微調(diào)位置，示例如下：

.container {
  position: relative;
}
.img {
  position: absolute;
  top: 50%; /* 定位到容器中心 */
  transform: translateY(-50%); /* 向上移動(dòng)自身高度的50%以實(shí)現(xiàn)居中 */
}

四、使用CSS的vertical-align屬性（針對(duì)行內(nèi)元素或表格單元格）

如果圖片是行內(nèi)元素或位于表格單元格中，可以使用vertical-align屬性來實(shí)現(xiàn)垂直居中。

img {
  vertical-align: middle; /* 使圖片在行內(nèi)元素或表格單元格中垂直居中 */
}

實(shí)現(xiàn)圖片在容器中上下居中顯示有多種方法，包括使用Flex布局、Grid布局、定位和transform屬性以及vertical-align屬性，在實(shí)際應(yīng)用中，可以根據(jù)具體需求和場(chǎng)景選擇合適的方法。