CSS 'transform' vs 'position: absolute'

Question

What is difference between

position: absolute;
top: 50%;
left: 50%;

and

transform: translate(-50%, -50%);

?

What is better to use?

Possible duplicate of [CSS translation vs changing absolute positioning values](https://stackoverflow.com/questions/11100747/css-translation-vs-changing-absolute-positioning-values) — Jon P, Sep 13 '18 at 07:32
1) Based on its parent (if relative), else screen. 2) Based on itself, i.e. moved here and there based on its own width/height. — VXp, Sep 13 '18 at 07:35

score 2 · Answer 1 · edited Dec 09 '22 at 11:54

position: absolute;
top: 50%;
left: 50%;

This object is placed according to the parent element. It will change according the parent's position.

transform: translate(-50%, -50%);

This object is based on itself. If the object is moved, it will translate according its new position.

Although both can show the same result in initial format, you will notice clear differences when styling parent elements.

1 Answers1