8 ways to center a div: The most common interview question
Tags: css, webdev, html, frontend
Published: 2023-09-23 07:56:19

Centering a div is now a meme on internet but still to this day it is very common among software developers that they are not familiar either with all the ways or sometimes even with one. Having a knowledge of all these ways is a great asset in your skill set and efficiency as a web developer.

The 8 ways are given below with the CSS code (and HTML code just for one) that needs to be applied to the elements. The HTML document structure for all the examples is as below:

```HTML
<div class="parent">
  <div class="child">
    Hello world!
  </div>
</div>
```

## 1. Position absolute
### Centers both vertically and horizontally
Position absolute brings the element out of the normal document flow. Then then we shift the top edge of the element 50% (of the document height) to the bottom and similarly the left side 50% (of the document width) to the right.

```CSS
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

## 2. Margin auto
### Centers only horizontally
If we set the width of parent element to the appropriate size, making the child element of a set width less than the parent element, we can set the margins to auto to center the div horizontally.

```CSS
.parent {
  width: 100%;
}

.child {
  width: fit-content;
  margin: 0 auto; /* 0 or anything for top and bottom but auto for left and right */
}
```

## 3. Flexboxes
### Centers both horizontally and vertically
If we make the parent as a flexbox. Then using `justify-content: center;` and `align-items: center;` we can center the div horizontally and vertically.

```CSS
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

## 4. Gird and place items
### Centers both horizontally and vertically
Using place-items is a short hand for both `align-items` and `justify-items`. Now using this shorthand to center the div horizontally and vertically is very easy.

```CSS
.parent {
  display: grid;
  place-items: center;
}
```

## 5. Grid and place self
### Centers both horizontally and vertically
Instead of centering all the elements in a div, we can center individual items as well. This is done using `place-self: center;`. This is a short hand for `justify-self: center;` and `align-self: center;`. You can use either one of them instead of `place-items` if you want to center in just a single direction.

```CSS
.parent {
  display: grid;
}

.child {
  place-self: center;
}
```

## 6. Margin auto with a grid
### Centers both horizontally and vertically
We can use `margin: auto;` along with grid as well to center the div.

```CSS
.parent {
  display: grid;
}

.child {
  margin: auto;
}
```

## 7. Margin auto with a flexbox
### Center both horizontally and vertically
We can use `margin: auto;` along with flexboxes as well to center the div.

```CSS
.parent {
  display: flex;
}

.child {
  margin: auto;
}
```

## 8. Using <center>
### Centers horizontally only
HTML hasn’t faded away and there exists this method of centering the elements `<center>` tag wrapped around the child element.

Unlike other methods, for this we will need to modify the HTML and not the CSS.

```HTML
<div class="parent">
  <center>
    <div class="child">
      Hello world!
    </div>
  </center>
</div>
```

## Example of all the methods
To test out all the methods, here is a collective pen made just for this.

{% codepen https://codepen.io/sahil2004/pen/XWoVYRm %}

## Conclusion
Centering a div is a thing we need to do a lot as a frontend developer. This is also a very trending meme.

![Meme on centering a div.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hz1yp50ndq14chh5g64.png)

> Source: https://www.reddit.com/r/ProgrammerHumor/comments/95z1xn/if_you_can_successfully_center_a_div_you_can/

So, save this article so that you can refer back to it whenever you need to center a div.

---

If you came this long, you must have liked the post. I highly recommend you to follow to never miss learning new and unknown things in the domain of web development. You can always unfollow if you don’t like it in the future.

Let’s get connected on linkedin: https://www.linkedin.com/in/sahil2004/
I post such amazing content there as well.