在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，將圖片居中是非常常見(jiàn)的需求。在 CSS 中我們可以通過(guò)幾種方式來(lái)實(shí)現(xiàn)這個(gè)效果。

方法一：使用 text-align 屬性

img {
display: block;
margin: 0 auto;
}

這種方式使用 text-align: center 把圖片居中。我們需要將img的顯示屬性設(shè)為顯示塊級(jí)元素，并使用margin屬性來(lái)將其水平對(duì)齊。

方法二：使用絕對(duì)定位

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

這種方式需要先將圖片父元素的定位屬性設(shè)為相對(duì)定位。然后，把圖片的定位屬性設(shè)為絕對(duì)定位，并使用左右、上下的偏移值將圖片居中。

方法三：使用 flexbox

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

這種方式是使用 flexbox 技術(shù)。將圖片父元素設(shè)為彈性容器，并使用屬性justify-content和align-items來(lái)將圖片水平、垂直居中。

總之，以上三種方法都可以實(shí)現(xiàn)在 CSS 中使圖片居中的效果，不過(guò) flexbox 的方式更為簡(jiǎn)便和適用，適用于大部分場(chǎng)景。