8

I want to create a little login pop-up card at the middle of the page when the client presses the login button. I managed to create the card itself, a gave it .absolute z-10 to be at the top of the other contents. I also wrapped it inside a container div with .relative to be able to position the card. My problem is I can't position it to the middle. If I add for example .right-0 it works, but I want to position it in the middle and I couldn't find anything in the documentation about that... Also, how can I add more height to my card that 64?

My code:

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>
Frigyes Vass
  • 139
  • 1
  • 4
  • 17

2 Answers2

16

Try this:

<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    ...
</div>
Amir Rami
  • 375
  • 3
  • 13
  • This is exactly how I tried to get it working but with Tailwind 3.0 it doesn't seem to transform back with the negative transform tags. I also get an off-center box. ‍♂️ – Selino Dec 14 '21 at 17:05
  • This should be the correct answer. Also, we don't need the `transform` it is redundant. – Ali Mustafa Jan 05 '23 at 00:15
7

You can use flexbox along with items-center and justify-center to perfectly fit center on the screen. For this you need to set the height and width to 100% to center with respect to entire screen. checkout if this works:

<!-- 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>

See the sample output here.

PJW
  • 344
  • 2
  • 9
  • 2
    Although this is a way to center an object, the question asks how to center and "absolute" element. You example uses flexor rules. Amir's answer should be the correct answer. – stldoug Dec 22 '22 at 17:27
  • 1
    This is not the ideal way to center an element. You are basically adding an overlay over the whole window just to center an element. This is bad especially if you have elements that you still want to interact with, which you won't be able to because you have an element "shadowing" the whole window underneath. – Ali Mustafa Jan 05 '23 at 00:12