Tailwindcss: [Feature Proposal] Absolutely position in centre

[MattRogowski]

Forgive me if this is already in progress anywhere I've missed or is indeed already possible, however, it would be good if there were classes to position elements centrally.

I've just added this CSS to my page, trying to keep the naming convention:

.pin-c-x {
    left: 50%;
    transform: translateX(-50%);
}
.pin-c-y {
    top: 50%;
    transform: translateY(-50%);
}
.pin-c {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

Using pin-x and pin-y doesn't achieve this as they "stretch" the element to the top and bottom.

I have a codepen to demonstrate here: https://codepen.io/mattrogowski/pen/LdpVNw

[adamwathan]

Hey @MattRogowski! Check out this PR which is pretty similar:

https://github.com/tailwindcss/tailwindcss/pull/71

Typically I would accomplish what you are asking for by using pin to pin all edges, and using Flexbox to center a child element. It's an extra element but avoids some complexity in the styling:

https://codepen.io/adamwathan/pen/WzQvOd

What do you think of that solution?

[MattRogowski]

Managed to re-work what I had to work with flex, I think I'm still in the habit of using positioning as flex still gets the better of me sometimes!

Really liking Tailwind so far, not had to write any custom CSS for anything, is the sort of framework I've wanted for a while! Thanks for such a quick response and advice.

[paulhuisman]

Hey @adamwathan

The codepen link above doesn't work anymore with v1.0.5 - do you know what I have to change to get items to align centered (vertical + horizontal) ?

Currently stuck on:

<div class="w-64 h-64 bg-red-300 mx-4 relative">
   <div class="pin flex justify-center items-end">
      <div class="inline-block align-middle w-32 h-32 bg-red-500"></div>
   </div>
</div>

[hacknug]

@paulhuisman not sure what the demo used to show but guessing it was something like this: https://codepen.io/hack_nug/pen/bXqxWd

[paulhuisman]

@hacknug that's what i needed - thanks!