在前端開發中，有時候我們需要將圖片進行水平居中對齊。那么該如何實現呢？下面介紹幾種方法：

// HTML代碼
<div class="container">
<img src="image.png">
</div>
// CSS代碼
.container {
text-align: center;
}
.container img {
display: inline-block;
}

以上代碼實現的方法是將包含圖片的容器設置為居中對齊，然后給圖片設置為行內塊元素，這樣就能讓圖片在容器中水平居中對齊了。

// HTML代碼
<div class="container">
<div class="img-wrapper">
<img src="image.png">
</div>
</div>
// CSS代碼
.container {
text-align: center;
}
.img-wrapper {
display: inline-block;
}
.img-wrapper img {
display: block;
margin: 0 auto;
}

以上代碼實現的方法是在包含圖片的容器外再套一層div，然后將這層div設置為inline-block，最后將圖片設置為塊級元素，設置左右margin為auto，這樣就能實現水平居中對齊了。

需要注意的是，以上方法均需要保證包含圖片的容器寬度小于或等于頁面寬度。