css中把div在图片上居中

使用CSS可以很容易地把DIV在图片上居中。在以下示例中，我们将使用一个包含图像和DIV的容器。

 <div class="container">
    <img src="image.jpg" alt="image">
    <div class="content">
      <p>这是居中的DIV内容</p>
    </div>
  </div> 

现在，我们将使用CSS来设置容器的样式和DIV元素上的样式。首先，我们需要对容器进行定位，并设置其相对定位。

 .container {
    position: relative;
  } 

接下来，我们将把图像设置为块元素，并给它一个最大宽度，以确保它适合容器。我们还将容器设置为灵活尺寸。

 img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  .container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  
  .content {
    position: absolute;
    text-align: center;
    z-index: 1;
  }
  
  .content p {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
  } 

现在，我们已经创建了一个相对定位的容器，并确保图像适合容器。我们还使用flexbox CSS属性将容器中的内容水平和垂直居中。接下来，我们将DIV元素的定位设置为绝对，并将其拉到容器的中央。最后，我们添加了一些样式来美化DIV的内容。

使用以上代码，您可以轻松地在图像上居中DIV元素。您可以根据需要进行自定义，并在CSS样式表中添加其他属性，使其更适合您的需求。