Css 顺风：图像顶部居中的div

我有以下HTML：

---

如何利用顺风呢？解决方案必须具有响应性。我不想使用背景图像CSS属性。我想使用

标记来代替标记必须是这样吗？像这样的怎么样：

<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>

div

现场观看：