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

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

圖片居中顯示：CSS技巧

在網(wǎng)頁設(shè)計中，圖片居中顯示是一個常見的需求，通過CSS，我們可以輕松地實現(xiàn)圖片的水平居中或垂直居中。

水平居中圖片

在CSS中，我們可以使用margin: auto;來實現(xiàn)圖片的水平居中，具體步驟如下：

1、將圖片元素設(shè)置為塊級元素（block-level element）。

2、將圖片元素的左右margin設(shè)置為auto。

3、設(shè)置圖片元素的寬度（width）。

以下是一個示例代碼：

<img style="display: block; margin-left: auto; margin-right: auto; width: 500px;" src="image.jpg" />

在這個示例中，圖片元素的寬度被設(shè)置為500像素，左右margin為auto，使得圖片在水平方向上居中顯示。

垂直居中圖片

垂直居中圖片的實現(xiàn)相對復(fù)雜一些，我們可以通過設(shè)置圖片元素的父元素的屬性來實現(xiàn)，具體步驟如下：

1、將圖片元素的父元素設(shè)置為相對定位（relative positioning）。

2、將圖片元素設(shè)置為***定位（absolute positioning）。

3、設(shè)置圖片元素的上下margin為auto。

4、設(shè)置圖片元素的高度（height）。

以下是一個示例代碼：

<div style="position: relative; height: 300px;">
    <img style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px;" src="image.jpg" />
</div>

在這個示例中，圖片元素的父元素高度被設(shè)置為300像素，圖片元素高度為200像素，通過top: 50%; left: 50%;將圖片元素的左上角定位到父元素的中心位置，再通過transform: translate(-50%, -50%);將圖片元素自身進行微調(diào)，實現(xiàn)垂直居中顯示。

通過以上兩種方法，我們可以輕松地實現(xiàn)圖片在網(wǎng)頁中的水平或垂直居中顯示。