BloG

The right way to Center a Div Using CSS Grid

Nov 23, 2022

In this text, we’ll have a look at 4 ways to horizontally and vertically center a div using CSS Grid. After all, these centering techniques will be used on any type of element. We’ve previously covered how one can center elements horizontally and vertically using Flexbox and positioning with transforms.

Setting Up

Let’s first create a container with a straightforward box element inside it that we’ll use to display 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;
}

In all our examples, we’ll be using the display: grid property. This establishes the

element as a grid container and generates a block-level grid for that container. (Here’s our demo template on CodePen if you need to experiment with it.)

Now, let’s have a look at the varied ways to center our div.

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

My favorite option to center a component with Grid is to make use of the place-self property. (You may read more about it here.)

Centering our div is so 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 (that are useful if you happen to’re just centering along one axis). You may experiment with them on this CodePen demo.

Using place-self is so easy that it’s an obvious go-to solution. Nevertheless it’s not the one option to center a component with Grid, so let’s now have a look at another methods.

A bonus of using place-self is that it’s applied to the element being centered, meaning that you may also use it to center other elements in the identical 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 have a 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 of the available space. There are various ways to set the justify-content property, but here we’re just going to set it to center.

Similar to the justify-content property, the align-items property is used to align the content in a container, but it surely aligns content vertically moderately than horizontally.

Let’s return to our test HTML and add the next 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, because the centering is handled by the container. But in some ways it’s also an obstacle to focus on the div via its container, as another element within the container may also be affected.

3. Center a Div with CSS Grid and Auto Margins

As all the time, we’ll goal the parent container with display: grid. We’ll also assign the div an automatic margin using margin: auto. This makes the browser mechanically calculate the available space surrounding the kid div and divide it vertically and horizontally, placing the div in the center:

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 a number of other cool things you’ll be able to 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 may 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.

Just like the place-self property, place-items is shorthand for 2 properties, on this case justify-items (horizontal) and align-items (vertical). You may experiment with them on this CodePen demo.

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

Conclusion

Each of those methods helps you to center a div horizontally and vertically inside a container. As I said, my preference is the the place-self method, mainly since it’s applied to the element being centered moderately than the container. That’s the identical for the margin: auto method. But in fact, if you happen to’re only trying to center your element in a single direction, you may also use either align-self or justify-self.

Within the demo examples, we’ve just used an empty div, but in fact you’ll be able to add content to the div and the centering will still work. And, once more, these centering techniques work on elements aside from divs.

Further reading: