css - TailwindCSS 中的固定元素居中

Question

我在成功的身份验证中加载页面时会出现一条 flash 消息，我正在尝试弄清楚如何将它水平居中放置在任何设备上。我正在使用 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>

Answer 1

使用 inset-x-0 与 mx-auto

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="mx-auto sm:w-3/4 md:w-2/4 fixed inset-x-0 top-10" id="signin-success-message">
  <div class="bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full">
    <svg viewBox="0 0 24 24" class="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>

要垂直居中:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="mx-auto sm:w-3/4 md:w-2/4 fixed inset-0 flex items-center" id="signin-success-message">
  <div class="bg-green-200 px-6 py-4 rounded-md text-lg flex items-center w-full">
    <svg viewBox="0 0 24 24" class="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>