CSS中的垂直居中是前端開發中常見的問題。在處理圖片和文字的垂直居中時，也不例外。
本文將介紹使用CSS將圖片和文字垂直居中的方法。

// 圖片垂直居中
.container{
display: flex; // 父元素設為flexbox容器
justify-content: center; // 水平居中
align-items: center; // 垂直居中
}
// 文字垂直居中
.container{
position: relative; // 確定容器
height: 300px; // 確定容器高度
text-align: center; // 水平居中
}
.content{
position: absolute; // content絕對定位
top: 50%; // 上下居中
transform: translateY(-50%); // 上下居中
}

對于圖片的垂直居中，可以使用flexbox布局。將圖片的容器元素設為flexbox容器，然后使用"justify-content: center"實現水平居中，"align-items: center"實現垂直居中。同時，圖片的高度需要小于其容器元素的高度，以實現垂直居中。

對于文字的垂直居中，可以使用相對定位和絕對定位配合實現。首先，為文字的容器元素設定高度，然后使用"text-align: center"實現水平居中。接著，使用相對定位為content元素設定一個位置，在使用絕對定位使其上下居中。代碼中，top為50%使其在容器頂部一半的位置，transform: translateY(-50%)使其上下居中。

通過以上方法，可以輕松地實現CSS中的圖片和文字的垂直居中。等比例縮放圖片高度或使用絕對定位可以增加適應性，使頁面更加美觀。