如何在Tailwind CSS中实现一张图片居中叠加在另一张图片上方

问题原因 #

你设置left: 50%、top: 50%（对应Tailwind的left-1/2、top-1/2类）时，只是将图标容器的左上角对齐到了父元素的中心位置，没有抵消图标自身的宽高带来的偏移，所以最终显示会偏向右下角。

解决方案1：使用平移偏移修正 #

给播放图标外层的span添加-translate-x-1/2和-translate-y-1/2两个类，将元素自身向左、向上偏移自身宽高的50%，即可实现完全居中：

<div className="w-1/6 h-11 relative text-center">
    <span className="absolute left-0 right-0 w-full h-full">
        <Image className="rounded-md" src="https://files.virgool.io/upload/users/785524/posts/sojszup8zfru/72bgkgkumdcq.jpeg" width="50" height="50" alt="video of" />
    </span>
    <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
        <Image src="/svg/play.svg" alt="play video" width="25" height="25" />
    </span>
</div>

解决方案2：使用flex布局自适应居中 #

你也可以让图标外层容器占满父元素的全部空间，再通过flex的居中属性实现内容居中，这种方案不需要关心图标自身的尺寸，适配性更强：

<div className="w-1/6 h-11 relative text-center">
    <span className="absolute left-0 right-0 w-full h-full">
        <Image className="rounded-md" src="https://files.virgool.io/upload/users/785524/posts/sojszup8zfru/72bgkgkumdcq.jpeg" width="50" height="50" alt="video of" />
    </span>
    <span className="absolute inset-0 flex items-center justify-center">
        <Image src="/svg/play.svg" alt="play video" width="25" height="25" />
    </span>
</div>

以上两种方案都可以实现播放图标完全居中叠加在背景图上方的效果。

内容的提问来源于stack exchange，提问作者Hasan