TailwindCSS 中的中心固定元素

Posted 2023-03-07

【中文标题】TailwindCSS 中的中心固定元素

【英文标题】：Center Fixed Element in TailwindCSS

【发布时间】：2021-04-19 12:17:28

【问题描述】：

当页面加载成功时，我会出现一条闪烁消息，我正在尝试弄清楚如何在任何设备上水平居中。我正在使用 TailwindCSS 来调整 div 的位置，并尝试使用 fixed 和 absolute 来确保它出现在我的内容上方，但是使用像 left:50% 这样的属性会将它移得太远，而 margin:auto 不会t 居中这个元素。有没有更好的方法来解决我想要做的事情？是否可以使用 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>

【参考方案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>

【讨论】：

垂直居中怎么样？

【参考方案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>