DEV Community

dhondup
dhondup

Posted on

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?

Top comments (12)

Collapse
 
deroldo profile image
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.

Collapse
 
titungdup profile image
dhondup

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

Collapse
 
deroldo profile image
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%);

Thread Thread
 
titungdup profile image
dhondup

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

Collapse
 
kylefilegriffin profile image
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.
Collapse
 
titungdup profile image
dhondup

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

Collapse
 
ben profile image
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 😓

Collapse
 
titungdup profile image
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 😊

Collapse
 
stephanie profile image
Stephanie Handsteiner

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

Collapse
 
cydstumpel profile image
Cyd

Animating items is sometimes easier with absolutely positioned elements

Collapse
 
mattbloomfield profile image
mattbloomfield

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

Collapse
 
titungdup profile image
dhondup

That's one good point.