DEV Community

Cover image for All the Ways to Center a Div

All the Ways to Center a Div

Katherine Peterson on February 28, 2021

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...
Collapse
 
ironcladdev profile image
Conner Ow

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 and translateY, just use translate(x, y) to minimize on code.

Also, I don't think you will need to set top, left, bottom, and right to zero in one of your examples. Just maybe set top, and left to zero and that should be enough.

Thanks for writing this useful article! I will use this sometime soon!

Collapse
 
facundocorradini profile image
Facundo Corradini • Edited

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

Collapse
 
mukhtaaraziz profile image
MukhtaarAziz

Good, thank you very much

Collapse
 
arvindsridharan profile image
arvindsridharan

This is awesome!

Collapse
 
spiritupbro profile image
spiritupbro

more of this series please

Collapse
 
ra1nbow1 profile image
Matvey Romanov

This is an eternal problem. Thank you very much!

Collapse
 
rahxuls profile image
Rahul

Must know things for beginners

Collapse
 
calinzbaenen profile image
Calin Baenen

Yes, you forgot the (deprecated, but still working) <center> tag.

Collapse
 
mrgrochowski profile image
mrGrochowski

From old times
parent
display: table
vertical-align: middle
text-align:center;
Child
display: inline-block

Collapse
 
pulkitsingh profile image
Pulkit Singh

There's one more way by adding margin auto and line-height 100%

Collapse
 
jprom profile image
Promise Johnson

Great @katherinecode. I just learnt something new.