HTML和CSS是網(wǎng)頁(yè)設(shè)計(jì)中非常重要的兩個(gè)技術(shù)，同時(shí)也是初學(xué)者必須要掌握的基礎(chǔ)知識(shí)。圖片居中是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的需求，接下來(lái)我們將介紹HTML和CSS如何實(shí)現(xiàn)圖片居中的效果。 首先，我們需要在HTML里添加一張圖片的標(biāo)簽，如下所示：

<img src="image.jpg" alt="圖片" />

這里的img標(biāo)簽表示圖片，src屬性表示圖片的路徑，alt屬性表示圖片的描述，/表示標(biāo)簽的結(jié)束。 接下來(lái)，我們需要為圖片添加樣式。在CSS中有多種方式可以實(shí)現(xiàn)圖片居中，下面介紹兩種： 1. 使用text-align屬性

<style type="text/css">
img {
text-align: center;
}
</style>

這里的text-align屬性表示對(duì)齊方式，設(shè)置為center表示圖片居中對(duì)齊。 2. 使用margin屬性

<style type="text/css">
img {
display: block;
margin: 0 auto;
}
</style>

這里的display屬性表示元素的顯示方式，設(shè)置為block表示元素以塊級(jí)元素的方式呈現(xiàn)；margin屬性表示元素的邊距，其中0表示上下左右邊距均為0，auto表示水平方向的邊距自動(dòng)調(diào)整。 以上兩種方式都可以實(shí)現(xiàn)圖片居中的效果，具體使用哪種方式可以根據(jù)實(shí)際情況進(jìn)行選擇。 總結(jié)一下，圖片居中的代碼如下所示：

<img src="image.jpg" alt="圖片" />
<style type="text/css">
img {
text-align: center;
}
/* 或者 */
img {
display: block;
margin: 0 auto;
}
</style>