CSS 中我们可以使用不同的方法来实现图片和文字上下居中的效果，这在设计中是非常常见的需求。本文将介绍两种实现方法。

第一种方法是使用 flexbox 布局。Flexbox 提供了很好的支持来实现各种对齐方式，包括上下居中。我们可以将图片和文字嵌套在一个 div 容器中，通过设置容器的 display 属性为 flex ，并使用 align-items 属性将内容在容器垂直居中。

.container {
display: flex;
align-items: center; /* 将容器内的内容垂直居中 */
}

第二种方法是使用 absolute 定位。我们可以将图片和文字的容器设置为 position: relative ，然后使用 position: absolute 将图片和文字都绝对定位在容器中央。具体实现代码如下：

.container {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 将图片在其包含块中的中心点居中 */
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 将文字在其包含块中的中心点居中 */
}

以上就是两种实现图片和文字上下居中的方法。需要注意的是，这两种方法在不同的情况下选择使用会有不同的效果，我们需要选择最适合我们设计的方法来实现这一效果。