在制作網(wǎng)頁(yè)的過(guò)程中，我們經(jīng)常會(huì)用到圖片來(lái)裝飾頁(yè)面。而圖片的位置的設(shè)置是一個(gè)重要的問題。本文將介紹如何使用HTML將圖片居中顯示。

//HTML代碼
<div class="center">
<img src="example.jpg" alt="example" />
</div>
//CSS代碼
.center {
display: flex; //將外層div設(shè)置為彈性盒子
justify-content: center; //設(shè)置justify-content屬性為center，水平居中
align-items: center; //設(shè)置align-items屬性為center，垂直居中
height: 300px; //這里是為了示例設(shè)置的高度，可以根據(jù)實(shí)際需要設(shè)置
}

上述代碼中，我們首先將圖片放在一個(gè)外層div中，并給這個(gè)div設(shè)置一個(gè)class名稱為"center"。然后在CSS代碼中，我們?cè)O(shè)置這個(gè)div為彈性盒子，使其中的元素可以方便地進(jìn)行居中操作。接著，我們將水平居中和垂直居中的屬性都設(shè)置為center，即可完成圖片的居中顯示。

通過(guò)這種方法，我們可以很方便地實(shí)現(xiàn)圖片的居中顯示，提高網(wǎng)頁(yè)的美觀程度和用戶體驗(yàn)。