今天我們來討論一下如何把 CSS 文字居中在圖片上。這個問題應(yīng)該很常見，因?yàn)榫W(wǎng)頁設(shè)計(jì)中經(jīng)常需要在圖片上添加文字信息。那么，我們該如何實(shí)現(xiàn)這個效果呢？下面我會用代碼給大家演示一下： 首先，我們需要將圖片和文字都包裹在一個 div 容器中： ```html``` 接下來，我們就可以在 CSS 中使用絕對定位來將文本居中在圖片上： ```css .container { position: relative; } .container img { display: block; } .container p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 以上代碼中，我們通過 `position: relative` 讓父容器 `.container` 成為了坐標(biāo)系原點(diǎn)。通過 `position: absolute`，我們讓子元素 `.container p` 相對于父容器定位。接著，我們使用 `top: 50%` 和 `left: 50%` 讓文本的左上角重合于圖片的中心點(diǎn)。最后，我們通過 `transform: translate(-50%, -50%)` 將文字向上向左平移它一半的寬度和高度，使其居中。 如果以上代碼還沒有解決你的問題，可以讓我們來看一下下面這個例子。經(jīng)常有些圖片尺寸比較小，需要將文本居中放置在圖片上面。下面這個例子就演示了這種情況： ```html``` ```css .container { position: relative; display: inline-block; } .container img { display: block; } .container p { position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%); } ``` 以上代碼中，我們通過 `display: inline-block` 讓容器 `.container` 自適應(yīng)圖片和文本大小。文本的定位通過 `top: 50%` 實(shí)現(xiàn)，而 `left: 0` 和 `right: 0` 則將文字的寬度限制在父容器的寬度范圍內(nèi)，同時設(shè)置 `text-align: center` 讓文本居中。最后，`transform: translateY(-50%)` 實(shí)現(xiàn)了垂直方向上的居中。 以上就是將 CSS 文字居中在圖片上的所有代碼，希望對大家有所幫助。