CSS如何讓文字在圖片上居中顯示

在CSS中，我們可以使用相對(duì)定位和***定位來(lái)實(shí)現(xiàn)文字在圖片上的居中顯示，下面是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<div class="image-container">
  <img src="your-image-url" alt="Your Image">
  <div class="text-container">
    <p>Your Text Here</p>
  </div>
</div>

CSS代碼：

.image-container {
  position: relative;
  width: 300px; /* 你可以根據(jù)需要設(shè)置圖片的寬度 */
  height: 200px; /* 你可以根據(jù)需要設(shè)置圖片的高度 */
}
.image-container img {
  width: 100%;
  height: 100%;
}
.text-container {
  position: absolute;
  top: 50%; /* 居中顯示 */
  left: 50%; /* 居中顯示 */
  transform: translate(-50%, -50%); /* 居中顯示 */
}

在這個(gè)示例中，我們首先將圖片容器設(shè)置為相對(duì)定位，然后設(shè)置圖片的寬度和高度，我們將文本容器設(shè)置為***定位，并使用top和left屬性將其放置在圖片的中心，我們使用transform屬性中的translate函數(shù)來(lái)微調(diào)文本的位置，使其完全居中。