CSS技巧：圖片居中顯示

在CSS中，我們可以使用多種技巧來將圖片居中顯示，下面我們將介紹兩種常用的方法：使用flexbox和使用CSS Grid。

1、使用flexbox

Flexbox是一種靈活的布局方式，可以輕松地實(shí)現(xiàn)圖片居中顯示，我們只需要將圖片所在的容器設(shè)置為flex容器，并將圖片設(shè)置為容器的中心項(xiàng)即可。

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

在上面的代碼中，.container是容器元素的類名，display: flex;將其設(shè)置為flex容器，justify-content: center;和align-items: center;分別將圖片在水平和垂直方向上居中。

2、使用CSS Grid

CSS Grid也是一種強(qiáng)大的布局方式，可以實(shí)現(xiàn)復(fù)雜的網(wǎng)頁布局，我們可以通過設(shè)置grid容器的行和列來將圖片居中顯示。

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

在上面的代碼中，.container是容器元素的類名，display: grid;將其設(shè)置為grid容器，justify-content: center;和align-items: center;分別將圖片在水平和垂直方向上居中，需要注意的是，CSS Grid需要指定具體的行和列來定位圖片，這里我們省略了具體的行和列設(shè)置。

使用flexbox和CSS Grid都可以實(shí)現(xiàn)圖片居中顯示的效果，我們可以根據(jù)具體的需求和布局來選擇合適的方法。