Why the positioning for #top h1 works as expected only when i use display:table for #top?

Question

https://code.sololearn.com/WQviTuGPsfaW/?ref=app

Answer 1

just for debug use outline on #top and #top h1 eith different color and you will understand. Anyway, you have to translate #top h1 bt self-half width on the left then you hve to use on it transform:translateX(-50%);

Answer 2

What's the expected?

Answer 3

Thankyou very much.

Answer 4

Its not very clear what you expect from your code...

Answer 5

Top:50%
Left:50%
This doesn't places h1 at the center of header div unless i specify display:table for header div.

Answer 6

Sameer Crestha Well,neither using table is centered but is seem centered because #top NOT fill width

Answer 7

Sameer Crestha You are welcome 👍🏻