TailwindCSS中的中心固定元素

我有一个闪光的消息，当一个页面加载到成功的身份验证，我试图找出我如何可以在任何设备上水平中心它出现。我正在使用TailwindCSS调整div的位置，并尝试了

fixed

和

absolute

以确保它出现在我的内容上方，但使用了类似

left:50%

的属性将其移得太远，并且

margin:auto

没有将此元素居中。有没有更好的方法来实现我的目标？是否可以使用TailwindCSS，或者我必须为此编写一些CSS

代码：

<div>
    <div className="mx-auto sm:w-3/4 md:w-2/4 absolute" id="signin-success-message">
        <div className="bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full">
            <svg viewBox="0 0 24 24" className="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
                <path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
            </svg>
            <span class="text-green-800">{ body ? body : '' }</span>
        </div>
    </div>
    <div>
    ...
    </div>
</div>

{正文？正文：“”
...

与

mx auto一起使用

{正文？正文：“”

对我来说，它是这样工作的（div垂直和水平居中）。此外，如果内容比div的高度长，我希望模态内容滚动：

<div
  v-if="isModalOpen"
  class="fixed z-20 h-3/4 w-1/2 m-auto inset-x-0 inset-y-0 p-4 bg-white rounded-sm overflow-y-scroll"
>
  <button @click.prevent="closeModal">Close me</button>

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut voluptas
  omnis nemo quas minima quam, repudiandae doloremque. Sunt magnam officia
  voluptatibus nostrum eligendi dignissimos minima itaque, praesentium
  corrupti obcaecati quas. Lorem ipsum dolor sit amet consectetur
  adipisicing elit. At harum id magni consequuntur ratione aperiam! Quasi
  animi sunt molestiae eos a voluptatem exercitationem voluptate quo,
  consectetur fugit tempore impedit qui! Lorem ipsum dolor sit amet
  consectetur adipisicing elit. Ea quae dolor maiores animi dolores deleniti
  laborum quis molestias nulla, reprehenderit eos odio recusandae
  consectetur velit saepe explicabo quibusdam quidem? Corrupti.
</div>

关上我
我的同僚们都是精英。奥特沃卢帕斯酒店
全方位的海底总动员是一个小小的码头。圣马格纳姆官方酒店
小圣餐、圣餐、圣餐
大盲肠腐败。同侧阴唇
再见。在我做主的时候！准
动物必须是动物，必须是动物，
暂时的奉献！Lorem ipsum dolor sit amet
阿迪皮斯精英。这是一种致命的致命伤
无症状的胎膜早破，无症状的胎膜早破，无症状的胎膜早破，无症状的胎膜早破，无症状的胎膜早破，无症状的胎膜早破，无症状的胎膜早破，无症状的胎膜早破
你能解释一下吗？腐败。

垂直居中如何？@Destaq检查更新