CSS 是頁面樣式的重要組成部分，它能夠使網(wǎng)頁的內(nèi)容呈現(xiàn)出更為優(yōu)美的視覺效果。其中，文字在圖片上的居中位置更是給網(wǎng)頁帶來了更多的視覺美感，下面來介紹一下如何實現(xiàn) CSS 文字在圖片上居中的效果。

我們首先需要一個帶有圖片的網(wǎng)頁元素，例如：

<div class="img">
<img src="example.jpg">
<p>這是圖片上的文字</p>
</div>

然后，我們可以利用 CSS 的定位屬性，將文字與圖片進行位置對齊。首先，設置 div 容器的 position 屬性為 relative：

.img {
position: relative;
}

然后，對文字元素進行定位，使其居中對齊。

.img p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這段代碼的含義是使元素距離容器頂部和左側(cè)的距離均為 50%，然后通過 transform 屬性調(diào)整居中位置。

通過這種方式，就可以在圖片上居中顯示文字了。