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
 
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
 
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
 
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
 
dmeritano profile image
David Meritano • Edited

Great! Good job Matteo

Collapse
 
matas_beade_bdcf7b59a037 profile image
Matías Beade

Kind of issues that keeps BE devs away from UI 😂

Collapse
 
suyash988 profile image
SUYASH AGNIHOTRI

Ask to @ezsnippet for more ways😁.