CSS中的圖片對齊一直是前端開發人員關注的一個問題。在網頁設計中，經常需要將圖片居中對齊，讓網頁更美觀。通常有三種方法可以實現圖片的居中對齊。

方法一：使用text-align屬性

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

使用text-align屬性可以將圖片居中。在這里，我們將img標簽設置為塊級元素，這樣就可以根據父元素進行布局。接著，就可以使用margin屬性來設置圖片的上下左右的間距，讓圖片在父元素里面水平居中對齊。

方法二：使用line-height屬性

div {
display: flex;
justify-content: center;
align-items: center;
}
img {
vertical-align: middle;
}

使用line-height也可以實現圖片的居中對齊。這里，我們需要給父元素設置為flex，并使用justify-content和align-items來讓子元素垂直和水平方向居中。另外，使用vertical-align屬性來讓圖片對其。

方法三：使用position和transform屬性

div {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

使用position和transform屬性可以實現圖片的居中對齊。首先，我們需要將父元素設置為相對定位，使得子元素可以基于父元素進行定位。然后，使用absolute使得圖片絕對定位。使用top和left屬性來讓圖片在父元素的中心位置。最后，我們可以使用transform屬性來調整圖片的位置，讓其水平和垂直方向居中。