7 ways you can center a div

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 to easily center a div, of course some of them are quite weird but it still works.

1. Text-align

This one is 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="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  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="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  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 the 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="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  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="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  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;
}

The result:

5. Grid:

This is actually my favourite, because it's the quickest way 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="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  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="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  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="parent">
  <div class="child">Centered Div</div>
</div>

.parent {
  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 to actually 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!

With these techniques centering should now be easy for me and you!!!