Centering a div is something we need to do all the time as web developers, and yet it still can be a challenge. There are many approaches you can t...
For further actions, you may consider blocking this person and/or reporting abuse
I figured out a lot of these ways on my own. It's great to have a reference on how centering works. Instead of using
translateX
andtranslateY
, just usetranslate(x, y)
to minimize on code.Also, I don't think you will need to set
top
,left
,bottom
, andright
to zero in one of your examples. Just maybe settop
, andleft
to zero and that should be enough.Thanks for writing this useful article! I will use this sometime soon!
Last time I counted, I found 13 different ways :) But most are variations or weird hacks that we don't really need anymore, so the three you posted should get us covered 99% of the time
Good, thank you very much
This is awesome!
more of this series please
This is an eternal problem. Thank you very much!
Must know things for beginners
Yes, you forgot the (deprecated, but still working)
<center>
tag.From old times
parent
display: table
vertical-align: middle
text-align:center;
Child
display: inline-block
There's one more way by adding margin auto and line-height 100%
Great @katherinecode. I just learnt something new.