Throughout my coding journey, I have seen a lot div center differently.
Each time I look at a codebase or watch a YouTube tutorial, I’m often met with different techniques used to center divs.
And you know what? That’s actually really helpful!
I remembered when I was first learning CSS, centering a div was so frustrating for me. I would spend so much time trying to get it right, only to end up with a div that looked completely off-center.
It drove me crazy, but seeing all these different methods makes me confident that I can really rely on anyone at anytime.
And yes, having multiple ways to center a div gives you options to find the right approach for your project’s needs.
So here are the 7 ways I’ve seen devs easily center a div, of course some of them are quite weird but I still see some using it.
1. Text-align
I actually stumbled upon this one while coding a project about 2 months ago…
It’s as straightforward as it gets – just set text-align: center on the parent, and display: inline-block on the child, and voila! Your div is centered horizontally.
<div class=“child”>Centered Div</div>
</div>
text-align: center;
}
.child {
display: inline-block;
background-color: red;
padding: 20px;
color: #fff;
}
Here’s the result:
2. Margin: auto:
The margin: auto trick is a classic – It is common to those who prefer a little more control,
Just set margin: 0 auto on your child div, and it’ll obediently center itself horizontally within its parent.
<div class=“child”>Centered Div</div>
</div>
text-align: center;
}
.child {
display: block;
margin: 0 auto;
background-color: red;
padding: 20px;
width: 200px;
color: #fff;
}
The result:
3. Position: absolute with transform:
Now, this one’s a bit more advanced, but it also does trick. It seems that this particular technique is quite common to senior devs.
This method will accurately center your div both horizontally and vertically within its parent container.
<div class=“child”>Centered Div</div>
</div>
position: relative;
height: 500px;
background-color: red;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ccc;
padding: 20px;
}
Here’s the result:
4. Position: absolute with margin: auto:
Another position: absolute approach, but this time using the margin: auto trick to center the child both horizontally and vertically.
Just set top: 0, bottom: 0, left: 0, right: 0, and margin: auto, and your div will happily sit in the center of its parent container.
<div class=“child”>Centered Div</div>
</div>
position: relative;
height: 100vh;
background-color: #5A4253;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #ccc;
padding: 20px;
width: 200px;
height: 100px;
}
5. Grid:
This is actually my favourite, because it’s the quickest way I have seen to center your divs both horizontally and vertically.
You just need to set place-items: center and all the immediate child elements of that parent will align themselves to the center.
<div class=“child”>Centered Div</div>
</div>
display: grid;
place-items: center;
height: 100vh;
}
.child {
background-color: #ccc;
padding: 20px;
}
Result:
6. Flexbox:
Flexbox centering has become second nature to me – it’s the method I instinctively reach for when aligning a div.
And this is, of course, the most common approach nowadays. Just set display: flex on the parent, justify-content: center to align horizontally, and align-items: center to align vertically. Boom! Your div is perfectly centered, allowing you to sit back and focus on the other important parts of your project.
<div class=“child”>Centered Div</div>
</div>
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: #FF7373
}
.child {
background-color: #ccc;
padding: 20px;
}
Result:
7. Table-cell with vertical-align:
This technique involves setting display: table-cell and vertical-align: middle on the parent. It’s a bit unconventional, but I have seen devs who used this.
<div class=“child”>Centered Div</div>
</div>
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #440A0A;
height: 300px;
width: 500px;
}
.child {
display: inline-block;
background-color: #ccc;
padding: 20px;
}
Result:
Wrap up
There you have it, folks! Seven ways people actually use to center a div!
You’ll agree with me that some are straightforward, while others might make your head spin a bit, but that’s just part of the fun!
Now, the real question is: which div centering dev are you? Are you a die-hard fan of the classic text-align approach, or do you embrace the sleek modernity of Flexbox or Grid? Perhaps you have a unique technique of your own that you’d like to share with everyone here?
