在網頁制作中，我們經常會使用圖片來豐富頁面的內容。但是，有時候圖片的大小不一致，排版時就會出現對不齊的情況。那么如何用CSS來達到圖片居中對齊呢？下面就來簡單講解一下。 首先，在HTML中要插入圖片，需要使用img標簽。代碼如下：

<img src="圖片地址" alt="圖片描述">

接下來，在CSS中添加以下代碼，即可讓圖片水平居中對齊：

img {  
display: block;   /*將圖片轉化為塊級元素*/ 
margin: 0 auto;   /*設置圖片的外邊距為0，左右居中對齊*/  
}

這里解釋一下這段代碼的含義： 首先，將圖片轉化為塊級元素，這是因為塊級元素可以設置寬度和高度，可以使圖片按我們想要的大小展示；接著，將圖片的外邊距設置為0，并將左右外邊距設置為auto，這樣就可以使圖片水平居中對齊了。 如果想要使圖片垂直居中對齊，可以再添加以下代碼：

.parent {  
display: flex;   /*將父元素設置為彈性盒子*/ 
justify-content: center;   /*水平居中對齊*/  
align-items: center;   /*垂直居中對齊*/  
}

這里我們需要將圖片和其他元素放在一個父元素中，然后將父元素的display設置為flex，然后分別設置justify-content和align-items屬性為center，即可實現圖片的垂直居中對齊。 總結一下，讓圖片居中對齊的CSS代碼如下：

img {  
display: block;  
margin: 0 auto;  
}  
.parent {  
display: flex;  
justify-content: center;  
align-items: center;  
}

以上就是關于CSS圖片居中對齊的教程，希望可以幫助大家實現網頁排版的美觀與協調。