DEV Community

Cover image for 3 Ways to CENTER a div in CSS
CodeOz
CodeOz

Posted on

3 Ways to CENTER a div in CSS

3 ways to center a div in HTML/CSS!!

With Position

/* Using positions */

.parent {
    position: relative;
}
.child {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode
<div
     class="parent"
     style="background: blue; width: 500px; height: 250px;"
     >
    <div
         class="child"
         style="color: white;"
         >
      I'm center  
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

With Flexbox

/* Using flexbox */
.container-flexbox {
    align-items: center;
    display: flex;
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode
<div
     class="container-flexbox"
     style="background: green; width: 500px; height: 250px;"
     >
    <div
         style="color: white;"
         >
      I'm center  
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

With Grid

/* Using Grid */

.container-grid {
    display: grid;
    place-content: center;
}

Enter fullscreen mode Exit fullscreen mode
<div
     class="container-flexbox"
     style="background: orange; width: 500px; height: 250px;"
     >
    <div
         style="color: white;"
         >
      I'm center  
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode


I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and send message to me 😁 and SAVE 19$ πŸ’΅πŸ’΅

Or get it HERE

πŸ‡«πŸ‡·πŸ₯– For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

β˜•οΈ You can SUPPORT MY WORKS πŸ™

πŸƒβ€β™‚οΈ You can follow me on πŸ‘‡

πŸ•Š Twitter : https://twitter.com/code__oz

πŸ‘¨β€πŸ’» Github: https://github.com/Code-Oz

And you can mark πŸ”– this article!

Discussion (18)

Collapse
unclecheap profile image
UncleCHEAP • Edited on

Let's not forget yet a 4th way. No need for "positioning."

.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    display: inline-block;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
codeoz profile image
CodeOz Author

Didn't know it! Thanks you for sharing it!

Collapse
undqurek profile image
undqurek • Edited on

Good job!
Some additional solutions:
dirask.com/posts/CSS-center-child-...
dirask.com/posts/CSS-center-child-...

And as last one, composition of 10 approaches (I like it mostly):
dirask.com/posts/CSS-center-elemen...

Collapse
codeoz profile image
CodeOz Author

very nice sharing thanks!

Collapse
bias profile image
Tobias Nickel

good post,

your last example for the grid example, still uses the flex class container-flexbox in the html

Collapse
codeoz profile image
CodeOz Author

thank you bro

Collapse
_fatali_ profile image
Fatali Fataliyev

div{
position:absolute;
left: 0; right: 0; top: 0; bottom: 0;
margin:auto;
width:300px;
height:300px;
background:red;
}

Collapse
captflys profile image
CaptFlys

Nice!

Collapse
ezraguy profile image
Guy

Nice post!
If I can add one thing is that in the second solution the
flex-direction: column is not really needed to center the div

Collapse
codeoz profile image
CodeOz Author

nice! I remove it from code thanks!

Collapse
shadowruge profile image
izaias

wonderful, simple and straightforward

Collapse
codeoz profile image
CodeOz Author

thank you a lot Izaias

Collapse
thanhrossi profile image
Tran Thanh
Collapse
yevgeniyadanila profile image
Yevgeniya Danila

i am learning CSS, thank you for the article

Collapse
codeoz profile image
CodeOz Author

happy to help you :)

Collapse
lassev05 profile image
LasseV

Hey thanks for this!

But you can Also just center a div with a text-align: center;

Collapse
unclecheap profile image
UncleCHEAP

Left-to-right center yeah, but that doesn't affect the relation to its parent vertically.

Collapse
codeoz profile image
CodeOz Author

Totally agree!