CSS中，圖文內容垂直居中是一個非常常見的需求。今天我們就來介紹如何基于CSS實現這個效果。

.container {
display: flex;
align-items: center;
justify-content: center;
}

首先，我們需要創建一個容器，這個容器將會包含我們想要垂直居中的內容。我們可以使用flex布局來實現這個效果。

其中align-items和justify-content屬性分別用來控制容器內項目的垂直和水平方向上的對齊方式。通過將它們都設置成center，我們就可以讓容器內的元素自動居中了。

.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

如果我們不想使用flex布局，還可以通過position和transform來實現圖文垂直居中。

首先，我們需要將容器設置成position: relative，然后將要垂直居中的內容設置成position: absolute。

然后，我們可以使用top屬性將內容垂直居中到容器的中心。但是這樣會讓元素的上邊距（top值）等于容器高度的一半，而不是元素自己高度的一半。所以我們還需要使用transform的translateY函數來調整元素的位置，將它上移自己高度的一半，使之正好居中。

以上是兩種基于CSS實現圖文內容垂直居中的方法。根據具體情況，我們可以選擇不同的方法來實現我們的需求。