CSS中文字放到圖片中間的方法

在CSS中，我們可以使用相對(duì)定位和***定位將文字放置在圖片中間，以下是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<div class="image-container">
  <img src="image.jpg" alt="背景圖片">
  <div class="text-container">
    <p>這是一段文字</p>
  </div>
</div>

CSS代碼：

.image-container {
  position: relative; /* 相對(duì)定位 */
  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%); /* 轉(zhuǎn)換以調(diào)整位置 */
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)包含圖片和文字的容器，我們?cè)O(shè)置容器的相對(duì)定位，并指定了寬度和高度，我們將圖片設(shè)置為填充容器，并設(shè)置圖片為***定位，我們將文本容器設(shè)置為***定位，并使用transform屬性調(diào)整位置，使其位于圖片中心。