在相对 div 内居中图像

Question

我有一个 relative div。在此 div 中，我想将图像居中（因此可以看到狗的脸）。我该怎么做？

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
  <img class="absolute w-full h-auto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" />
</div>

Answer 1

将这些样式添加到您的 img

top: 50%;
transform: translateY(-50%);

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
  <img style="top: 50%; transform: translateY(-50%);" class="absolute w-full h-auto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" />
</div>

Answer 2

只需输入CSS文件或图片样式：

img {
    top: 50%;
    transform: translateY(-50%);
}

Answer 3

div {
  background-image: url('https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg');
  background-repeat: no-repeat;
  /* background size makes it full width */
  background-size: cover;
  background-position: center;
}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
 
</div>

这使用 css 将图像放在 div 中作为背景。这是我喜欢用的东西。

Answer 4

为了达到预期效果，使用带负值的顶部，因为图像位置是绝对的

div{
  position: relative;
}

img{
  position: absolute;
  top: -220px; 
}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
  <img class="absolute w-full h-auto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" />
</div>

在相对 div 内居中图像

Center image within relative div

css

tailwind-css