在開發網頁時，我們經常要展示圖片。有的時候，我們需要讓圖片在不改變比例的前提下，以高度居中的方式顯示。那么，在CSS中，如何實現這個效果呢？下面，就來分享一下如何實現這個需求。

img{
max-height: 100%;
display: block;
margin: auto;
}

如上代碼所示，我們設置了圖片最大高度為100%，這樣即使圖片很高，也不會超出父容器的高度。同時，設置圖片為塊級元素，并設置外邊距為auto，這樣就可以實現圖片的水平居中。至于垂直居中，由于圖片高度是動態的，所以無法直接設置垂直居中。但是，在這里我們可以使用line-height屬性，來模擬圖片的垂直居中效果。

.container{
width: 600px;
height: 400px;
line-height: 400px;
text-align: center;
}
.container img{
max-height: 100%;
display: inline-block;
vertical-align: middle;
}

如上代碼所示，我們設置了容器的高度為400px，并將 line-height 設置為相同的值。這樣，當我們在容器中添加文字時，文字就可以垂直居中了。而在圖片的 CSS 樣式中，我們通過display: inline-block將其轉化成行內塊元素，同時，設置vertical-align: middle實現了圖片的垂直居中效果。

綜上所述，CSS中實現圖片高度居中，可以通過設置圖片的最大高度，使其不超出父容器的高度，同時通過設置圖片的內聯塊元素，實現圖片的水平居中。而在實現圖片的垂直居中時，可以通過line-height屬性及vertical-align屬性的配合使用，來實現垂直居中的效果。