對(duì)于許多網(wǎng)頁(yè)設(shè)計(jì)者來說，居中圖片是一個(gè)很基礎(chǔ)但也很重要的任務(wù)。CSS 提供了幾種方法來實(shí)現(xiàn)圖片居中的效果，其中最常用的方法是使用 margin 屬性。通過以下的代碼，我們可以將一個(gè)圖片水平和垂直居中：

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

這里讓圖片顯示為塊狀元素，這樣才能使用 margin 居中。而 margin 的兩個(gè)值分別設(shè)置為 0 和 auto，就能讓圖片在水平方向上居中。同時(shí)，由于沒有給垂直方向上的 margin 值進(jìn)行設(shè)定，所以圖片也就在垂直方向上居中了。 如果要確保所有的圖片都能夠垂直和水平地居中顯示，我們可以將圖片放置在一個(gè) div 標(biāo)簽內(nèi)，然后為 div 標(biāo)簽設(shè)置寬度和高度（注意，這兒的寬度和高度必須是確定的數(shù)值），如下所示：

div {
width: 300px;
height: 300px;
position:relative;
}
img {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

這里的圖片顯示為絕對(duì)定位元素，所以我們必須將其容器（也就是 div 標(biāo)簽）的 position 屬性設(shè)置為 relative。計(jì)算 top 和 left 值時(shí)，都將值設(shè)為 50%，這樣圖片就可以在它的容器中垂直和水平居中。最后，對(duì)于 transform 函數(shù)，我們對(duì)圖片進(jìn)行了平移，以便使圖片能夠準(zhǔn)確地垂直和水平居中。 需要注意的是，在使用這種方法時(shí)應(yīng)該盡量避免使用百分比作為容器的寬度和高度，否則可能會(huì)導(dǎo)致圖片無法正確地居中。此外，需要交叉驗(yàn)證不同瀏覽器的效果，以確保所有的圖片在各個(gè)瀏覽器中都能夠正確地居中。