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

1. 使用flex布局
2. 使用position屬性
3. 使用CSS Grid布局

CSS圖片居中技巧

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要將圖片居中展示，以吸引用戶的注意力或展示特定的視覺效果，如何使用CSS來讓圖片居中呢？

使用flex布局

flex布局是一種非常強大的CSS布局方式，可以輕松地讓圖片居中，我們可以將圖片的容器設(shè)置為flex布局，并利用justify-content和align-items屬性來分別控制水平和垂直方向上的對齊方式。

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

使用position屬性

我們可以將圖片設(shè)置為***定位，并利用top、right、bottom和left屬性來控制圖片在容器中的位置，通過調(diào)整這些屬性的值，我們可以讓圖片在容器中水平垂直居中。

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

使用CSS Grid布局

CSS Grid布局也是一種非常強大的CSS布局方式，可以讓圖片在容器中居中展示，我們可以將圖片的容器設(shè)置為Grid布局，并利用justify-content和align-items屬性來分別控制水平和垂直方向上的對齊方式。

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

三種方法都可以讓圖片在容器中居中展示，你可以根據(jù)自己的需求和喜好來選擇***適合的方法。