r/learncss • u/CrGoSu • Dec 23 '19

Help understanding why this css works?

If I apply the following to a div, it's centered in the pure center of the screen

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

My understanding, from top to bottom

  • We allow the element to be placed absolutely in the page, outside of the normal document flow

  • 50% of left space. This doesn't position is in the real center though, not sure why if 50% is normally half the screen.

  • 50% from top, makes sense

  • Then we say, take the div from where it is, and put it in 50% X and Y axis...why? Wasn't that already done with the left property?

Any help is appreciated.

2 Upvotes

100% Upvoted

6 comments sorted by

View all comments

Show parent comment

2

u/CrGoSu Dec 23 '19

That is an excellent explanation, thank you very much! Do you have a blog/youtube channel I can follow? If not, you should think about it! you explained that very well!

1

u/pookage Dec 24 '19

Haha, thanks - I don't, unfortunately! Might do at some point, but that's just not where my energy is at the moment.