Can't center absolute position (Tailwind.css)

Question

Background & Problem:

I'm using Tailwind CSS and Alpine.js for a simple search bar that has a dropdown positioned using absolute

Codepen here: https://codepen.io/jdonline/pen/YzXpbyJ

When I position the dropdown using relative, it positions perfectly as I want it to (but stretches the rest of the page which I don't want). However, when I change this to absolute, although it no longer stretches the page, it extends the dropdown wider than expected.

Example:

You can see this by clicking the dropdown arrow on the right side of the search bar. You can also see the difference when changing absolute to relative on Line 26

Question:

How can I, using Tailwind.css, position the dropdown so it has absolute position, but doesn't extend wider than the search bar?

The link is dead, but perhaps you could also use `inset-y-0` — undefined, Jul 12 '22 at 12:55
I’m voting to close this question because , the link is no more working, and there is no debugging details as such which is left in the question, it is just a raw question without any context. as the entire question was dependent on the link provided. — krishnaacharyaa, Apr 01 '23 at 17:52

score 200 · Answer 1 · edited Jun 12 '23 at 15:17

200

with tailwind only, you can use the following classes

absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

so, it would be like

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

edited Jun 12 '23 at 15:17

roapp

530
6
17

answered Apr 02 '21 at 23:24

Adharsh M

2,961
3
16
23

11

Note that with Tailwind 3, you don't need `transform` anymore. [Cf this doc](https://tailwindcss.com/docs/upgrade-guide#automatic-transforms-and-filters) – David Dahan Dec 28 '21 at 15:32

score 33 · Answer 2 · edited Jun 12 '23 at 15:54

33

for Tailwind try this :

absolute m-auto left-0 right-0

edited Jun 12 '23 at 15:54

roapp

530
6
17

answered Mar 24 '22 at 04:30

Alarih

347
3
3

5

This solved the problem for me. But why does it work? – L.Youl Apr 17 '22 at 10:42
I would like to know too – Jose Daniel Aug 05 '23 at 20:52

Akhil Aravind · Accepted Answer · 2020-02-23T15:22:31.377

The answer is very simple, position:absolute should have a parent div with position:relative, in your case relative is for body I think, You need to give relative to the parent div which is n line number 25,

You can also refer Position CSS

<div x-show.transition.opacity.duration.700ms="open" class="relative" >
    <div class="absolute inset-x-0 shadow-xl bg-white w-3/4 md:w-2/5 mx-auto -mt-1 rounded-lg rounded-t-none">

score 7 · Answer 4 · edited Jun 09 '23 at 23:00

7

I found my answer in this proposal on the Tailwind Github profile. https://github.com/tailwindlabs/tailwindcss/discussions/1531

Adding this utility class it works perfectly:

.inset-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

edited Jun 09 '23 at 23:00

roapp

530
6
17

answered Feb 04 '21 at 19:57

Davide Casiraghi

15,591
9
34
56

score 1 · Answer 5 · answered Apr 24 '23 at 23:25

You can also use the grid and the place-items-center to place item in the middle e.g.

<div class="relative">
  <div class="absolute bottom-0 left-0 right-0 top-0 grid place-items-center">
   <!-- Add your content here -->
  </div>
</div>

If you want to place the item in the center you can also do it with the following classes absolute left-0 right-0 grid place-items-center

<div class="relative">
  <div class="absolute left-0 right-0 grid place-items-center">
   <!-- Add your content here -->
  </div>
</div>

I created an example on the playground https://play.tailwindcss.com/FPLV9gLqBD

Can't center absolute position (Tailwind.css)

5 Answers5