DEV Community

Cover image for How to center a div?
Matteo Bianchi
Matteo Bianchi

Posted on • Updated on

How to center a div?

How to Center a Div in CSS

Centering a div is the most impossible thing

1. Centering with Flexbox

Flexbox is a modern way to center content both vertically and horizontally:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode
<div class="container">
    <div class="centered-div">Centered Content</div>
</div>
Enter fullscreen mode Exit fullscreen mode

2. Centering with Grid

CSS Grid can also center content:

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode
<div class="container">
    <div class="centered-div">Centered Content</div>
</div>
Enter fullscreen mode Exit fullscreen mode

3. Centering with Absolute Positioning

You can center a div using absolute positioning:

.container {
    position: relative;
    height: 100vh;
}
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode
<div class="container">
    <div class="centered-div">Centered Content</div>
</div>
Enter fullscreen mode Exit fullscreen mode

4. Centering with Margin Auto

For simple horizontal centering, use margin: auto:

.centered-div {
    width: 50%;
    margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode
<div class="centered-div">Centered Content</div>
Enter fullscreen mode Exit fullscreen mode

5. Centering with inline-block display

For inline or inline-block elements:

.container {
    text-align: center;
    line-height: 100vh;
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
Enter fullscreen mode Exit fullscreen mode
<div class="container">
    <div class="centered-div">Centered Content</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Top comments (20)

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.