How to Center a Div Using CSS Grid

September 29, 2022 Abraham Smith

In this article, we’ll look at four ways to horizontally and vertically center a div using CSS Grid. Of course, these centering techniques can be applied to any type of element. We’ve already covered how to center elements horizontally and vertically with Flexbox and position them with transforms.

Set up

First, let’s create a container with a simple Box element inside that we’ll use to demonstrate these centering methods. Here is the HTML code:

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

And here is 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 in a black container at the top left

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

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

1. Center a Div with CSS Grid and place it yourself

My favorite way to center an element with Grid is to use 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 with SitePoint’s Grid and Place-Self (@SitePoint)
on code pen.

That place-self property is an abbreviation for that align-self (vertical) and justify-self (horizontal) properties (which are useful if you only center along one axis). You can experiment with this in this CodePen demo.

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

A benefit of using place-self is that it applies to the element being centered, which means you can also use it to center other elements in the same container. (Try adding more divs to the CodePen demo and see what happens.)

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

Now let’s take a look at what using Grid with is all about justify-content and align-items center our div

That justify-content property is used to horizontally align the elements of the container when the elements don’t use all the available space. There are many ways to set that justify-content property, but here we’ll just put it on center.

Just like them justify-content property, that align-items property is used to align the content in a container, but aligns the content vertically, not horizontally.

Let’s go back 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
Center with Grid, Align Yourself, and Justify Yourself by SitePoint (@SitePoint)
on code pen.

An obvious advantage of this method is that it requires less code since the centering is handled by the container. But in a way, addressing the div through its container is also a disadvantage, since every other element in the container is affected as well.

3. Center a Div with CSS Grid and Auto Margins

As always, we’re co-targeting the parent container display: grid. We’ll also assign an automatic margin to the div using margin: auto. This will make the browser automatically calculate the available space around the child div and split 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 from SitePoint (@SitePoint)
on code pen.

(As an aside, there are many other cool things you can do with CSS borders.)

4. Center a Div with CSS Grid and place elements

That place-items property is used to align elements 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 automatic margins by SitePoint (@SitePoint)
on code pen.

As place-self Property, place-items is in this case an abbreviation for two properties justify-items (horizontal) and align-items (vertical). You can experiment with this in this CodePen demo.

In contrast to place-self, place-items is applied to the container, giving it a little less flexibility.

Conclusion

Any of these methods allows you to center a div horizontally and vertically within a container. Like I said, my preference is this place-self method, mainly because it is applied to the element to be centered and not to the container. That also applies to them margin: auto Method. But if you only want to center your element in one direction, you can of course use both align-self or justify-self.

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

Continue reading:

unugtp