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

1. 使用margin屬性實(shí)現(xiàn)圖片居中
2. 使用flexbox布局實(shí)現(xiàn)圖片居中
3. 使用grid布局實(shí)現(xiàn)圖片居中

CSS中圖片居中的多種方法

使用margin屬性實(shí)現(xiàn)圖片居中

在CSS中，我們可以利用margin屬性來(lái)使圖片居中顯示，具體做法是給圖片元素設(shè)置左右margin為auto，這樣瀏覽器會(huì)自動(dòng)計(jì)算并分配左右空白區(qū)域，使圖片居中。

img {
  margin-left: auto;
  margin-right: auto;
}

此方法適用于塊級(jí)元素，并且要求圖片的父元素具有足夠的寬度，否則，圖片可能會(huì)因?yàn)楦冈貙挾炔蛔愣鵁o(wú)法完全居中。

使用flexbox布局實(shí)現(xiàn)圖片居中

Flexbox是一種現(xiàn)代的布局方式，可以輕松實(shí)現(xiàn)元素的居中顯示，要使圖片居中顯示，我們可以將圖片的父元素設(shè)置為flex容器，然后使用justify-content和align-items屬性來(lái)實(shí)現(xiàn)圖片的水平和垂直居中。

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

這種方法適用于任何場(chǎng)景，無(wú)論圖片是行內(nèi)元素還是塊級(jí)元素，都可以輕松實(shí)現(xiàn)居中，這種方法還可以同時(shí)處理水平和垂直居中，非常方便。

使用grid布局實(shí)現(xiàn)圖片居中

Grid布局是另一種現(xiàn)代的布局方式，也可以輕松實(shí)現(xiàn)元素的居中顯示，我們可以將圖片的父元素設(shè)置為grid容器，然后使用place-items屬性來(lái)實(shí)現(xiàn)圖片的居中。

.parent {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}
``` 這種方法同樣適用于任何場(chǎng)景，而且也可以同時(shí)處理水平和垂直居中，grid布局還提供了更多的布局選項(xiàng)，可以應(yīng)對(duì)更復(fù)雜的布局需求。