TailwindCSS 中的中心固定元素

Question

我在成功验证后加载页面时出现一条闪现消息，我正在尝试弄清楚如何在任何设备上将它水平居中。我正在使用 TailwindCSS 调整 div 的位置，并尝试 fixed 和 absolute 以确保它出现在我的内容上方，但使用 [= =13=] 将它移得太远并且 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>

Answer 2

对我来说它是这样工作的（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>

TailwindCSS 中的中心固定元素

Center Fixed Element in TailwindCSS

css

tailwind-css