Do you still use "position" to center align vertically and horizontally?

It's 2020 and we have amazing flex and grid method to center align items both horizontally and vertically. I wonder anyone still use position absolute to center align items? If yes, when and why do you use them?

Comments

[João Vitor Bragion Deroldo de Oliveira]

I use flex in all my projects, but i had a trouble these days, i was making an header with tree elements, so i had this:

when i set: justify-content: space-between the logo was misaligned because is smaller than so it was necessary to align the with position absolute and trasnform to center it exactly in the header.

[dhondup]

Interesting! I would love to see a codepen demo if you are willing to create one.

[João Vitor Bragion Deroldo de Oliveira]

Take a look at this pen: codepen.io/joaoskr/pen/eYmPNBG

If you remove this properties from domain-toggle class, you'll see what i said about alignment:
position: absolute;
left: 50%;
transform: translateX(-50%);

[dhondup]

That's a nice use case for position alignment. I think it would be difficult to achieve that result with any other method.

[Ben Halpern]

I mostly still use them because I struggle to get things right with flex and grid and fall back to old things I know 😓

[dhondup]

I am sure you can get it right, shouldn't be that hard for you to grasp the concept of flex and grid.

P.S Never had i imagined you'll be replying to my question. You made my day 😊

[Stephanie Handsteiner]

Ah, the lazy arse solution fallback, when you don't care to fix your flex/grid errors. 😅

[Kyle Griffin]

It depends on

• How many items horizontally need to be aligned
• If i want the content to center while ignoring other elements in the container
• If I want the content to take the container width into account.
• If I expect the number of elements to change.
• If I want the padding to be factored into the alignment of the items.

[dhondup]

Nice scenarios! Can you also specify solution method you use in each case? That would be great to know.

[Cyd]

Animating items is sometimes easier with absolutely positioned elements

[mattbloomfield]

Because flex is quite buggy on old IE, and unfortunately a lot of my work has to be compatible with IE...

[dhondup]

That's one good point.