7 ways you can center a div
Tags: webdev, css, frontend, html
Published: 2024-04-24 08:05:22

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.

```html
<div class="parent">
  <div class="child">Centered Div</div>
</div>
```

```css
.parent {
  text-align: center;
}

.child {
  display: inline-block;
  background-color: red;
  padding: 20px;
  color: #fff;
}
```
Here's the result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxonynbgauuhe32vyu6w.png)

## 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.

```html
<div class="parent">
  <div class="child">Centered Div</div>
</div>
```

```css
.parent {
  text-align: center;
}

.child {
  display: block;
  margin: 0 auto;
  background-color: red;
  padding: 20px;
  width: 200px;
  color: #fff;
}
```
The result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcpfi1kj478qcwkwbet9.png)

## 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.

```html
<div class="parent">
  <div class="child">Centered Div</div>
</div>
```

```css
.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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98glse5uc42m1mkutn6q.png)

## 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.

```html
<div class="parent">
  <div class="child">Centered Div</div>
</div>
```

```css
.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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6uy76p8dj0djdjgizg8s.png)

## 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.

```html
<div class="parent">
  <div class="child">Centered Div</div>
</div>
```

```css
.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}

.child {
  background-color: #ccc;
  padding: 20px;
}
```
Result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5mt5q7q96ez854n2ulu.png)

## 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.

```html
<div class="parent">
  <div class="child">Centered Div</div>
</div>
```

```css
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: #FF7373
}

.child {
  background-color: #ccc;
  padding: 20px;
}
```
Result: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk34f93bl8o2hc9zj9ym.png)

## 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.

```html
<div class="parent">
  <div class="child">Centered Div</div>
</div>
```

```css
.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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgrc4j47kvbyjvq5x72r.png)

## 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!!!