DEV Community

Cover image for How to center a div?

How to center a div?

Matteo Bianchi on July 10, 2024

How to Center a Div in CSS Centering a div is the most impossible thing 1. Centering with Flexbox Flexbox is a modern way t...
Collapse
 
grahamthedev profile image
GrahamTheDev •

You missed centring using Markdown 🤣💗

 

 

 

I am centered

 

 

 

Collapse
 
joshuadacosta profile image
Joshua Da Costa •

How do you did? 😂
I am sorry for my english. I am from Angola

Collapse
 
grahamthedev profile image
GrahamTheDev •

Paragraphs with nbsp in them and the center element! 💗

Collapse
 
thaisavieira profile image
Thaísa Vieira • • Edited

For those who would like to practice some concepts like Flexbox, I suggest the Flexbox Froggy game, for Grid I suggest Grid Garden game, and if you just wanna some free quick challenge I highly recommend CSSBattle. Remember, practice is the key!

Collapse
 
heyalihere profile image
Ali ÇOLAK •

awesome sharing, thank you!

Collapse
 
forestdev profile image
Dominykas Bartkus •

You don’t center a div. Life’s too short to center a div.

Collapse
 
tahomash profile image
Thomas Haas •

I love grid! It only came 30 years too late, in the meantime my hair has become significantly less (due to plucking out of sheer desperation).

Collapse
 
devnbeyond profile image
DevNbeyond •

FBI open up, he centered a Div 😂😂

Collapse
 
mb337 profile image
Matteo Bianchi •

😂

Collapse
 
lucaargentieri profile image
Luca Argentieri •

Some are missing 👀

Collapse
 
martinbaun profile image
Martin Baun •

Saw that too heheh👀

Collapse
 
lpablodev profile image
LPabloDev • • Edited

Ingles: Thank you very much for your comment! I was not aware of those 3 resources that you provided us, thank you very much again.

Spanish: Muchas gracias por su comentario! no tenia conocimiento sobre esos 3 recursos que nos proporciono, muchas gracias nuevamente.

Collapse
 
aloisseckar profile image
Alois Sečkár • • Edited
  1. Ask ChatGPT how to do it.

You don't need to remember how to do it. Your job as a software engineer is to decide why - and whether - it is necessary.

Collapse
 
chandra_pantachhetri profile image
Chandra Panta Chhetri •

I've recently been using ChatGPT to do simple tasks like this. It's quicker & I can focus on the more important parts of the code.

Collapse
 
bretbernhoft profile image
Bret Bernhoft •

Great article. I typically use Flexbox and/or "margin: 0 auto;" for centering a div element. There are of course other ways of accomplishing the same task, which you outline in this post.

Collapse
 
chandra_pantachhetri profile image
Chandra Panta Chhetri •

I recently used #3 - Centering with Absolute Positioning. One thing to note is that the top, left, right, bottom properties are relative to its parent & translate is relative to the element's own size.

Collapse
 
absmadlad profile image
KANISHK VIKRAM SINGH • • Edited

or just use the

center tag.
Collapse
 
matas_beade_bdcf7b59a037 profile image
Matías Beade •

Kind of issues that keeps BE devs away from UI 😂

Collapse
 
dmeritano profile image
David Meritano • • Edited

Great! Good job Matteo

Collapse
 
suyash988 profile image
SUYASH AGNIHOTRI •

Ask to @ezsnippet for more ways😁.