3 Different Ways to Center A Div in CSS
Tags: html, css, tutorial, webdev
Published: 2023-11-05 15:27:13

When it comes to designing a webpage, one of the most common problems we face is how to center or align different elements. In this article, we will explore three different methods that could help you center an element using CSS.

> 📧 Subscribe to my newsletter: https://ericsdevblog.ck.page/profile

As we've explained in the [HTML & CSS: A Practical Guide](https://www.ericsdevblog.com/courses/html-css/) course, we usually utilize the block-level elements such as `<div>` to create webpage layouts. However, the problem with `<div>` is that the block is always anchored to the top left corner by default.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            box-sizing: border-box;
            padding: 0px;
            margin: 0px;
        }

        div {
            border: 2px solid;
        }

        .big {
            width: 500px;
            height: 500px;
        }

        .small {
            border-color: red;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small">

        </div>
    </div>
</body>

</html>
```

![block default](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/images/block-default.png)

## Use auto margin to center blocks horizontally

There are many ways you could move the inner block. Let's start with the horizontal direction. The easiest way to center the `<div>` block horizontally is by setting its margin to `auto`.

```css
.small {
    border-color: red;
    width: 300px;
    height: 300px;

    margin: auto;
}
```

![block centered horizontally](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/images/block-h-center.png)

## Use flexbox to center blocks horizontally

Alternatively, you could utilize the [flexbox or grid layout](https://www.ericsdevblog.com/courses/html-css/4/#creating-grids) by setting [the `display` property](https://www.ericsdevblog.com/courses/html-css/4/#display-types) of the outer box to `flex`/`grid`. This allows you to easily configure the position and alignment of its child elements. For instance, you can center the inner block by setting `justify-content` to `center`.

```css
.big {
    width: 500px;
    height: 500px;

    display: flex;
    justify-content: center;
}
```

Although this method seems to be more complex, it does have its benefits, especially when you have a more complex layout. For example, you can center two or more blocks with the same CSS property.

![horizontally center multiple blocks](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/images/block-h-center-multiple.png)

For more information on creating layouts using grids and flexboxes, check out my article on [How to Position and Arrange Content Using CSS](https://www.ericsdevblog.com/courses/html-css/4/).

## Use padding to center blocks vertically

As for centering the block vertically, unfortunately, there is no easy way to do it. You could set a top padding for the outer block, but this method requires you to micromanage each element, and you need to know the exact size of the blocks.

```css
.big {
    width: 500px;
    height: 500px;

    padding: 150px;
}

.small {
    border-color: red;
    width: 200px;
    height: 200px;
    margin: auto;
}
```

In this example, the outer block is `500px` high, the inner block is `200px` high, which means the center of the inner block aligns with the `100px` point. If we push the inner block down by `150px`, its center should align with the center of the outer block, which is at the `250px` point.

![center vertically with padding](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/images/block-v-center-padding.png)

## Use position and transform to center blocks

Even though we successfully centered this block, but as you can imagine, it is not an effective method in practice. What if we don't know the exact size of the blocks, or if the size of the block is adjustable?

In this case, you could use `position` and `transform` like this:

```css
.big {
    width: 500px;
    height: 500px;

    position: relative;
}

.small {
    border-color: red;
    width: 200px;
    height: 200px;
    margin: auto;

    resize: both;
    overflow: auto;

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

In this case, `resize: both;` makes sure the inner block is adjustable. The `absolute` position, along with `top: 50%;` and `left: 50%;` will place the top left corner of the inner box to the center point of the outer box.

![absolute position, top 50% and left 50%](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/images/abs-p-top-left.png)

And then `translate(-50%, -50%)` shifts the inner block's position back by 50% of its own width and height, aligning its center point with the outer block's center point.

![center element with position and transform](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/images/center-position-transform.png)

This technique ensures that the inner box will always be centered inside the outer box, even if its size changes.

![change size](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/images/change-size.gif)

## Use flexbox to center blocks vertically

Lastly, just like the horizontal direction, you can center the inner block vertically using the flexbox layout with the `align-items` property.

```css
.big {
    width: 500px;
    height: 250px;

    display: flex;
    align-items: center;
}
```

![vertically center div with flexbox](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/images/block-v-center.png)

Of course, you can combine the techniques we discussed above to center the blocks both horizontally and vertically using the flexbox layout. For example:

```css
.big {
    width: 500px;
    height: 250px;

    display: flex;
    justify-content: center;
    align-items: center;
}
```

![center div with flexbox](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/images/block-center-flex.png)

## Conclusion

In this article, we went over three different methods to center an element within another element, including using `margin` and `padding`, `position` and `transform`, as well as the flexbox/grid layout.

These methods all have their own unique advantages and disadvantages. The auto margin method is the easiest to set up, but it can become impractical when you have multiple elements to center, and you'll have to micromanage each of them.

Using the flexbox/grid layout, you will be able to center all of its child elements with one CSS property, but this method is more complicated. There are six different alignment properties available, each of them serves a different purpose. I've discussed all of them in the article [How to Position and Arrange Content Using CSS](https://www.ericsdevblog.com/courses/html-css/4/), take a look if you are interested.

Lastly, the `position` and `transform` method is most suitable for elements that have varying sizes. However, it requires you to have a deeper understanding of these properties. If you're interested in learning more about them, you can also refer to the previously linked article.

That's all for this article. Happy coding!

If you are interested, here are some of my other articles about CSS and frontend design:

- [Delve into CSS Grid and Flexbox](https://levelup.gitconnected.com/delve-into-css-grids-and-flexboxes-eba532677bab)
- [How to Create Transitions and Animations Using CSS](https://levelup.gitconnected.com/how-to-create-transitions-and-animations-using-css-f5fff20dcaa2)
- [How to Position and Align Elements Using CSS](https://levelup.gitconnected.com/how-to-position-and-align-elements-using-css-73db2ef3d6ac)
- [Working with Typography in CSS](https://blog.devgenius.io/working-with-typography-in-css-ca700859fe27)
- [Three Ways of Defining Colors in CSS](https://medium.com/devdive/three-ways-of-defining-colors-in-css-7b2f98a3fbf3)
- [HTML & CSS: A Practical Guide](https://www.ericsdevblog.com/courses/html-css/)
- [CSS and Responsive Design](https://www.ericsdevblog.com/courses/html-css/5/)
- [How to Center A Div in CSS](https://www.ericsdevblog.com/posts/how-to-center-a-div-in-css/)