CODEWITHSUNDEEP
css
Miroslav
Miroslav

Reputation: 315

CSS 'transform' vs 'position: absolute'

What is difference between

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

and

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

?

What is better to use?

Upvotes: 3

Views: 2169

Answers (1)

Sparky
Sparky

Reputation: 297

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.

Upvotes: 2

Related Questions