在Web開發中，經常會遇到圖片垂直居中對齊的問題。那么如何使用CSS來實現呢？ 首先，我們需要讓圖片所在的容器具有一定的高度，比如設置為200像素。接著，在CSS中設置該容器的display屬性為flex，這樣子元素就可以很方便地實現垂直居中對齊了。 下面是具體的代碼實現：

.container {
height: 200px;
display: flex;
justify-content: center; /* 水平居中對齊 */
align-items: center; /* 垂直居中對齊 */
}
.container img {
max-height: 100%; /* 防止圖片超出容器高度 */
}

在上面的代碼中，我設置了容器的justify-content屬性為center，這樣子元素就可以水平居中對齊了。進一步地，我又設置了align-items屬性為center，這樣子元素就可以垂直居中對齊了。 值得注意的是，在上面的代碼中，我還設置了圖片的max-height屬性為100%，這是為了防止圖片超出容器高度，影響整個頁面的美觀效果。 綜合來看，使用CSS實現圖片垂直居中對齊是一件很簡單的事情，只要理解了flex布局和相關的CSS屬性，就可以輕松地實現。