Tailwind：图像顶部居中的 div

【问题标题】：Tailwind: Centered div on top of imageTailwind：图像顶部居中的 div
【发布时间】：2021-05-21 14:11:50
【问题描述】：

我有以下 HTML：

<div>
<img src="">
<div><!-- centered form on top of the image --></div>
</div>

Here is how the layout should be

如何使用 Tailwind？解决方案必须是响应式的。我不想使用 background-image CSS 属性。我想改用<img> 标签

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

标记必须是这样吗？像这样的东西怎么样：

<div class="container mx-auto bg-gray-500 w-1/2 p-4 relative">
  <img src="http://placehold.it/300" alt="" class="w-full h-auto">
  <div class="bg-red-300 w-1/2 h-1/2 absolute top-1/4 left-1/4 rounded-lg p-4">div</div>
</div>

现场观看：https://play.tailwindcss.com/IxHzcdTq1a

【讨论】：