CSS怎么實現圖片水平居中？
在網頁設計中，為了讓圖片的顯示更加美觀，我們通常會對圖片進行水平居中處理。下面我們就來介紹一下如何使用CSS實現圖片水平居中的效果。
方法一：使用display和margin
我們可以將圖片的display屬性設為“block”，然后通過margin屬性設置左右的邊距為“auto”，這樣就可以將圖片水平居中了。
下面是實現圖片水平居中的CSS代碼：

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

方法二：使用text-align
另外一種比較簡單的方法是，將圖片所在的父容器的text-align屬性設為“center”，這樣圖片就會自動水平居中了。
下面是實現圖片水平居中的CSS代碼：

.parent {
text-align: center;
}
.parent img {
vertical-align: middle;
}

其中，要將子元素（即圖片）的屬性vertical-align設為middle，這樣就可以使圖片垂直居中了。
總結
以上兩種方法都可以實現圖片水平居中，但是在實際應用中，我們應該根據具體情況選擇合適的方法。如果父容器只包含一張圖片，那么第一種方法比較適合；如果父容器中還有其它內容，就可以選擇第二種方法。另外，為了使圖片的效果更佳，我們還可以對圖片設置一些特效，比如鼠標懸停時的動畫效果等。