顺风中心绝对元素

Question

我想在客户端按下登录按钮时在页面中间创建一个小的登录弹出卡。我设法自己创建了卡片，并将其 .absolute z-10 置于其他内容的顶部。我还将它包裹在容器 div 和 .relative 中，以便能够放置卡片。我的问题是我不能把它放在中间。例如，如果我添加 .right-0 它可以工作，但我想将它放在中间，但我在文档中找不到任何关于它的信息......另外，我如何才能为我的卡增加 64 的高度？

我的代码：

index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jófogás</title>
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <!-- header section -->
    <header class="bg-white flex">
      <div class="w-3/6">
        <img
          class="h-12 m-4"
          src="./logo_img/jofogas_logo_original.jpg"
          alt="jofogas_logo_original"
        />
      </div>
      <div class="mx-6 my-6 w-3/6 text-right">
        <button class="bg-orange-500 rounded py-2 px-4 text-white">
          Belépés
        </button>
      </div>
    </header>
    <!-- login card -->
    <div class="relative">
      <div class="absolute z-10 items-center right-0">
        <div
          id="login-card"
          class="w-56 h-64 text-center bg-orange-500 rounded-lg"
        ></div>
      </div>
    </div>
    <!-- search bar -->
    <div class="bg-gray-200 rounded-lg mx-10 md:pt-10" id="search-container">
      <div class="text-center text-4xl hidden md:block" id="main-text">
        Hirdess vagy vásárolj a Jófogáson!
      </div>
      <div class="py-10 text-center">
        <input
          class="w-5/6 md:w-3/6 md:h-12"
          id="search-bar"
          type="text"
          placeholder="Mit keresel?"
        />
        <i class="fa fa-search icon"></i>
      </div>
    </div>
    <div class="text-center">
      <button
        class="bg-green-500 rounded py-4 px-8 md:py-8 md:px-16 text-white text-xl md:text-2xl my-10"
      >
        Hirdetésfeladás
      </button>
    </div>
  </body>
</html>

Answer 1

您可以将 flexbox 与 items-center 和 justify-center 一起使用，以完美地适应屏幕的中心。为此，您需要将高度和宽度设置为相对于整个屏幕居中的 100%。检查是否有效：

<!-- login card -->
  <div class="fixed h-full w-full flex items-center justify-center bg-opacity-50 bg-gray-700">
    <div class="z-10">
      <div id="login-card"
        class="w-56 h-64 text-center bg-orange-500 rounded-lg"
      ></div>
    </div>
  </div>

查看示例输出 here。

Answer 2

试试这个：

<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    ...
</div>

顺风中心绝对元素

Tailwind center an absolute element

css-position

absolute

centering

tailwind-css