CSS是网页设计中不可或缺的一个语言，而其中图片居中加文字这个功能也是较为常见和重要的。下面就来介绍一下如何使用CSS来实现这个功能。

<div class="container">
<img src="https://example.com/image.jpg" alt="example image">
<p>这是一段文本</p>
</div>

首先，我们需要有一张图片和一段文字。以上代码中，我们使用了一个div容器，里面包含了一张图片和一段文字。

.container {
position: relative;
}
.container img {
display: block;
margin: 0 auto;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

接着，在CSS中设置容器的相对定位，图片的块级显示和居中，以及文字的绝对定位和居中。重点是利用了transform: translate(-50%, -50%);来将文字居中，这个属性很常用也很重要。

最后，我们就成功地实现了CSS图片居中加文字的效果。