Tailwind center an absolute element

P

2

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>

Peeve answered 6/10, 2020 at 20:37 Comment(0)

N

6

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.

Niccolo answered 7/10, 2020 at 18:12 Comment(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. – Colostomy 22/12, 2022 at 17:27

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. – Cort 5/1, 2023 at 0:12

C

18

Try this:

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

Cody answered 21/4, 2021 at 10:40 Comment(2)

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. 🤷🏽‍♂️ – Cranford 14/12, 2021 at 17:5

This should be the correct answer. Also, we don't need the transform it is redundant. – Cort 5/1, 2023 at 0:15

N

6

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.

Niccolo answered 7/10, 2020 at 18:12 Comment(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. – Colostomy 22/12, 2022 at 17:27

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. – Cort 5/1, 2023 at 0:12

Recommended topics

Hot tags