在網頁設計中，經常需要在圖片上添加文字，這可以使用CSS來實現。本文將介紹在CSS中如何在圖片中央添加文字。

.image-with-text {
position: relative;
display: inline-block; 
}
.image-with-text img {
display: block;
max-width: 100%;
height: auto;
}
.image-with-text p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 2rem;
text-align: center;
}

首先，需要把圖片及其文字放在一個包裹元素中，為了讓文字和圖片在同一行，可以將包裹元素設置為inline-block。然后，給圖片設置max-width:100%和height:auto，以確保圖片在不同設備上能夠自適應大小。接下來，在包裹元素中添加一個段落元素，并設置其position屬性為absolute，這樣可以讓文字相對于包裹元素定位。然后設置top和left屬性為50%，這樣文字就能垂直和水平居中。由于文字默認是在段落元素的左側對齊，因此需要通過設置text-align:center來讓文字水平居中。最后，可以根據需要設置文字的顏色、大小等屬性。

如下示例代碼展示了一個簡單的CSS圖片中間寫字的效果：

<div class="image-with-text">
<img src="image.jpg">
<p>這里是文字</p>
</div>