在web頁面中，經常需要使用圖片來豐富頁面的內容。但是在圖片顯示的過程中，可能會遇到圖片不居中的問題，特別是當圖片和文字配合使用時，圖片過大或過小，會使頁面的視覺效果受到影響。本文就將介紹如何使用CSS來解決圖片垂直居中的問題。 首先，我們需要了解兩個概念：行高和行內元素。行高指的是元素的高度，行內元素則是指可以放在文本行中的元素，如圖片、文字等。 當我們需要把圖片垂直居中時，可以先將圖片作為塊級元素來處理，然后設置行高與容器一致，再利用表格單元格(vertical-align)屬性來實現垂直居中的效果。這樣可以保證不管圖片的大小如何，都能在容器中實現垂直居中的效果。 下面是CSS代碼的示例：

p {
border: 1px solid #ccc;
height: 100px;
line-height: 100px;
text-align: center; /*文字水平居中*/
}
img {
vertical-align: middle; /*圖片垂直居中*/
}

在以上代碼中，通過設置p標簽的高度和行高一致，同時給圖片設置vertical-align屬性的值為middle，就能實現圖片垂直居中的效果。如果需要將多個圖片垂直居中，則需要將它們都放在一個容器中，然后再通過表格單元格的方式來設置。 總結：使用CSS實現圖片垂直居中，需要注意行高和行內元素的概念，通過設置行高一致和表格單元格屬性來實現。這樣可以保證不論圖片的大小如何，都能實現垂直居中的效果，提高頁面的視覺效果。