HTML & CSS

How to Center a Div Using CSS Grid

Fimber Elemuwa
Share

In this article, we’ll look at five ways to horizontally and vertically center a div using CSS Grid. Of course, these centering techniques can be used on any kind of element. We’ve previously covered how to center elements horizontally and vertically using Flexbox and positioning with transforms.

Setting Up

Let’s first create a container with a simple box element inside it that we’ll use to demonstrate these centering methods. Here’s the HTML:

<article>
  <div></div>
</article>

And here’s our starting CSS:

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

Our starting position, with a yellow square sitting top left in a black container

In all our examples, we’ll be using the display: grid property. This establishes the <article> element as a grid container and generates a block-level grid for that container. (Here’s our demo template on CodePen if you want to experiment with it.)

Now, let’s look at the various ways to center our div.

1. Center a Div with CSS Grid and place-self

My favorite way to center an element with Grid is to use the place-self property. (You can read more about it here.)

Centering our div is as simple as this:

article {
  display: grid;
}

div {
  place-self: center;
}

See the Pen
Centering Using Grid and place-self by SitePoint (@SitePoint)
on CodePen.

The place-self property is a shorthand for the align-self (vertical) and justify-self (horizontal) properties (which are useful if you’re just centering along one axis). You can experiment with them in this CodePen demo.

Using place-self is so simple that it’s an obvious go-to solution. But it’s not the only way to center an element with Grid, so let’s now look at some other methods.

An advantage of using place-self is that it’s applied to the element being centered, meaning that you can also use it to center other elements in the same container. (Try adding more div elements to the CodePen demo and see what happens.)

2. Center a Div with CSS Grid, justify-content and align-items

Let’s now look at what’s involved with using Grid with justify-content and align-items to center our div.

The justify-content property is used to align the container’s items horizontally when the items don’t use all the available space. There are many ways to set the justify-content property, but here we’re just going to set it to center.

Just like the justify-content property, the align-items property is used to align the content in a container, but it aligns content vertically rather than horizontally.

Let’s return to our test HTML and add the following code to the parent container:

article {
  display: grid;
  justify-content: center;
  align-items: center;
}

See the Pen
Centering Using Grid, align-self and justify-self by SitePoint (@SitePoint)
on CodePen.

An apparent advantage of this method is that it involves less code, as the centering is handled by the container. But in some ways it’s also a disadvantage to target the div via its container, as any other element in the container will also be affected.

3. Center a Div with CSS Grid and Auto Margins

As always, we’ll target the parent container with display: grid. We’ll also assign the div an automatic margin using margin: auto. This makes the browser automatically calculate the available space surrounding the child div and divide it vertically and horizontally, placing the div in the middle: 

article {
  display: grid;
}

div {
  margin: auto;
}

See the Pen
Center an Element with CSS Grid, justify-content and align-items by SitePoint (@SitePoint)
on CodePen.

(As an aside, there are lots of other cool things you can do with CSS margins.)

4. Center a Div with CSS Grid and place-items

The place-items property is used to align items vertically and horizontally in a grid. It can be used to center our div by targeting the container like this:

article {
  display: grid;
  place-items: center;
}

See the Pen
Center a Div with CSS Grid and Auto Margins by SitePoint (@SitePoint)
on CodePen.

Like the place-self property, place-items is shorthand for two properties, in this case justify-items (horizontal) and align-items (vertical). You can experiment with them in this CodePen demo.

In contrast to place-self, place-items is applied to the container, which gives it slightly less flexibility.

5. Centering a Div with Grid Areas

The final method we’ll cover digs more into the layout powers of Grid layout, as we’ll look at two ways to center our div using grid areas.

Here’s our essential CSS:

article {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 1fr 100px 1fr;
}

div {
  background: yellow;
  grid-column: 2;
  grid-row: 2;
}

Now we’re explicitly laying out a grid, with an area in the middle to house our div. We don’t even have to set dimensions on our div now, as the grid tracks will handle that. We set a grid “cell” in the middle of the grid that’s 200px wide and 100px tall, and then we tell our div to place at the second grid line and the second row line. Our div is, once again, placed nicely in the center of its container, as shown below.

See the Pen
Center a Div with CSS Grid by SitePoint (@SitePoint)
on CodePen.

Grid layout offers various different ways to achieve this result. Let’s end by doing the same thing as above, but this time using a named area for our div:

article {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 1fr 100px 1fr;
  grid-template-areas: ".  .  ."
                       ". box ."
                       ".  .  .";
}

div {
  background: yellow;
  grid-area: box;
}

Here, we’re setting a grid-area named box and then describing where it should sit on the grid, specifying which “cells” are empty with a simple dot (.).

Below is a live CodePen demo.

See the Pen
Center a Div with CSS Grid by SitePoint (@SitePoint)
on CodePen.

The advantage of this layout method is that it can easily incorporate lots of other elements placed wherever and however we desire. That is the power of Grid layout.

Conclusion

Each of these methods lets you center a div horizontally and vertically within a container. As I said, my preference is the the place-self method, mainly because it’s applied to the element being centered rather than the container. That’s the same for the margin: auto method. But of course, if you’re only looking to center your element in one direction, you can also use either align-self or justify-self.

In the demo examples, we’ve just used an empty div, but of course you can add content to the div and the centering will still work. And, once again, these centering techniques work on elements other than divs.