在相对 div 中居中图像答案

【问题标题】：Center image within relative div在相对 div 中居中图像
【发布时间】：2019-09-25 05:05:09
【问题描述】：

我有一个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>

【问题讨论】：

我会删除 img 标签，并在您的“相对” div 上使用 background-image css 属性（例如 jsfiddle.net/mpgbd6fw）
因为图片有绝对位置，可以用负值top来设置div的位置，-codepen.io/nagasai/pen/arOpZJ

标签： css tailwind-css

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

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 作为背景。这是我喜欢使用的东西。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

将这些样式添加到您的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>

【讨论】：