CSS中設置圖片的水平居中是一件比較常見的需求，接下來我們就來學習如何做到這一點。

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

以上代碼就是實現圖片水平居中的關鍵，我們來一一解釋一下。

第一行：

img {

這一行的作用是指定該頁面中所有的圖片都使用這個樣式。

第二行：

display: block;

這一行的作用是將圖片的display屬性設置為`block`，使它變成一個塊級元素。

第三行：

margin: 0 auto;

這一行的作用是讓瀏覽器自動為圖片設置左右邊距，從而讓圖片在父元素中水平居中。

以上三行CSS代碼共同協作，就能實現圖片水平居中的需求啦。