如何用CSS設(shè)置圖片居中

在網(wǎng)頁設(shè)計(jì)中，圖片居中是一個(gè)常見的需求，通過CSS（層疊樣式表），我們可以輕松地實(shí)現(xiàn)圖片的居中顯示，下面是一些關(guān)于如何使用CSS設(shè)置圖片居中的方法。

1、使用margin: auto;

將圖片的左右邊距設(shè)置為自動(dòng)，可以使圖片在容器中水平居中。

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

2、使用text-align: center;

將圖片的文本對齊方式設(shè)置為居中，也可以使圖片在容器中水平居中。

div {
    text-align: center;
}
img {
    display: inline-block;
}

3、使用vertical-align: middle;

將圖片的垂直對齊方式設(shè)置為中間，可以使圖片在容器中垂直居中。

img {
    vertical-align: middle;
}

4、使用position: absolute;

將圖片的定位設(shè)置為***定位，可以通過設(shè)置top和left屬性來***控制圖片的位置。

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

方法都可以實(shí)現(xiàn)圖片的居中顯示，具體使用哪種方法取決于你的需求和設(shè)計(jì)，希望這些方法能對你有所幫助！