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

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

CSS布局技巧：圖片在框內(nèi)的居中對齊

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要將圖片放置在特定的框框內(nèi)，并且實(shí)現(xiàn)圖片在框內(nèi)的居中對齊，下面，我們將探討如何使用CSS來實(shí)現(xiàn)這一效果。

使用CSS Flexbox布局

Flexbox布局是一種強(qiáng)大的CSS布局方式，可以輕松實(shí)現(xiàn)圖片在框內(nèi)的居中對齊，為包含圖片的div元素設(shè)置CSS樣式，將其設(shè)為flex容器，并設(shè)置justify-content和align-items屬性為center。

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

只需將圖片放入帶有此樣式的div中，圖片就會自動在框內(nèi)居中對齊。

使用CSS Grid布局

CSS Grid布局也是一種可以實(shí)現(xiàn)圖片居中對齊的有效方法，將包含圖片的div設(shè)為grid容器，并使用place-items屬性將圖片居中。

.container {
  display: grid;
  place-items: center;
}

使用定位和transform屬性

除了上述兩種方法外，我們還可以使用定位和transform屬性來實(shí)現(xiàn)圖片的居中對齊，為圖片設(shè)置一個定位（如相對定位），然后使用transform屬性將其水平垂直居中。

img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

三種方法都可以實(shí)現(xiàn)圖片在框內(nèi)的居中對齊，可以根據(jù)具體需求和場景選擇合適的方法，這些方法也可以應(yīng)用于其他元素的居中對齊，具有很高的實(shí)用價值。