
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
more of this series please
Must know things for beginners
This is awesome!
Yes, you forgot the (deprecated, but still working)
<center>
tag.This is an eternal problem. Thank you very much!
There's one more way by adding margin auto and line-height 100%
From old times
parent
display: table
vertical-align: middle
text-align:center;
Child
display: inline-block
Great @katherinecode. I just learnt something new.