今天我們來學(xué)習(xí)一下如何用CSS將圖片居中顯示在網(wǎng)頁中。 首先，在HTML中，我們需要用img標(biāo)簽來插入圖片，像這樣：

<img src="image.jpg" alt="description">

接下來，我們使用CSS來為圖片添加樣式。我們可以使用以下代碼：

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

這個代碼塊中，“display: block;”將圖片設(shè)置為塊元素，即使它在一行中是它獨(dú)自一個元素。然后，“margin: 0 auto;”將圖片的左右邊距都設(shè)為自動，這會將其水平居中。 如果你想將圖片垂直居中，你需要先將其放置在一個容器中。我們可以使用以下代碼來創(chuàng)建一個包含圖片的div元素：

<div class="container">
<img src="image.jpg" alt="description">
</div>

然后，我們可以使用以下代碼來將圖片垂直居中：

.container {
display: flex;
justify-content: center;
align-items: center;
}

這個代碼塊中，“display: flex;”使容器變成一個彈性盒子，讓我們可以使用justify-content和align-items屬性來將圖片居中。 “justify-content: center;”將圖片水平居中，“align-items: center;”將圖片垂直居中。 總之，在使用CSS來居中圖片時，“display: block;”和“margin: 0 auto;”可用于水平居中，而在將圖片垂直居中時，我們需要將其放在一個容器中，并使用“display: flex;”和“justify-content: center;”和“align-items: center;”進(jìn)行操作。 希望這篇文章能幫助你更好地掌握居中圖片的技巧！