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

1. 水平居中顯示圖片
2. 垂直居中顯示圖片

CSS圖片居中顯示的方法詳解

水平居中顯示圖片

在CSS中，實現(xiàn)圖片的水平居中顯示有多種方法，一種常見的方法是使用margin屬性，我們可以設(shè)置圖片的左右margin為自動（auto），這樣圖片就會在其容器中水平居中。

img {
    margin-left: auto;
    margin-right: auto;
    display: block; /* 使圖片塊級元素顯示 */
}

另一種方法是使用flexbox布局，我們可以將圖片的父容器設(shè)置為flexbox布局，然后使用justify-content屬性將圖片居中。

.parent {
    display: flex;
    justify-content: center; /* 水平居中對齊 */
}

垂直居中顯示圖片

垂直居中顯示圖片相對復(fù)雜一些，但也同樣有多種方法可以實現(xiàn)，一種常見的方法是使用position屬性配合transform屬性，我們可以將圖片的父容器設(shè)置為相對定位（relative），然后將圖片設(shè)置為***定位（absolute），再通過top和bottom屬性設(shè)置圖片的垂直位置，***后使用transform屬性進(jìn)行微調(diào)。

.parent {
    position: relative; /* 相對定位 */
}
img {
    position: absolute; /* ***定位 */
    top: 50%; /* 設(shè)置垂直位置 */
    transform: translateY(-50%); /* 微調(diào)位置 */
}

另一種方法是使用flexbox布局和align-items屬性，我們可以將圖片的父容器設(shè)置為flexbox布局，然后使用align-items屬性將圖片垂直居中。

.parent {
    display: flex; /* flex布局 */
    align-items: center; /* 垂直居中對齊 */
}
```css圖片居中顯示是網(wǎng)頁設(shè)計中常見的需求，通過CSS我們可以輕松地實現(xiàn)圖片的居中顯示，以上介紹了幾種常見的實現(xiàn)方法，包括水平居中、垂直居中的多種實現(xiàn)方式，可以根據(jù)具體的需求選擇適合的方法。