CSS是我們網頁開發中必不可少的一部分，而對于圖片的居中對齊，CSS也提供了非常方便的處理方式。下面讓我們來了解一下如何使用CSS實現圖片的上下居中。

/*給圖片所在的父元素設置樣式*/
.parent {
display: flex; /*使用flex布局*/
align-items: center; /*在交叉軸上居中對齊*/
justify-content: center; /*在主軸上居中對齊*/
height: 300px; /*設置高度*/
}
/*給圖片設置樣式*/
img {
width: 200px; /*設置圖片的寬度*/
height: auto; /*保持圖片的寬高比*/
}

以上的代碼中，我們首先給圖片所在的父元素設置了flex布局，并使用align-items和justify-content屬性分別在交叉軸和主軸上對齊。應注意的是，父元素需要設置一個高度，以便讓圖片垂直居中。接著，我們給圖片設置了寬度，并設置了高度自適應，從而保持圖片的寬高比不變。

如果使用CSS實現圖片的上下居中，還有其他的一些方式，比如使用position屬性來實現相對定位和絕對定位等。但是相對于這些方式，使用flex布局的方法更加簡單、直觀且兼容性較好，所以更受到開發者的青睞。