CSS Grid most easy center vertical and horizontal

β€” 3 minute read

permalink

As a follow up on the CSS Flex center article.

Which I've used in about almost all me articles that include a demo, it is now time to give you a view of the same principle using CSS Grid.

Much like Flexbox, it's super easy to center element using Grid.

To fully center a element all we need is:

.container {
display: grid;
place-items: center;
min-height: 100vh;
}

The min-height is optional in this case it's needed to give it a vertical height.

This will result in the following:

See the Pen CSS Grid most easy center vertical and horizontal by Chris Bongers (@rebelchris) on CodePen.

CSS Grid center only horizontal permalink

If for instance you would only want something centered horizontal you can use the following CSS:

.container {
display: grid;
justify-content: center;
min-height: 100vh;
}

We can use the justify-content and pass the center value to make it horizontally centered.

Note: this is the same use as for display: flex.

This results in the following Codepen.

See the Pen CSS Grid most easy center horizontal by Chris Bongers (@rebelchris) on CodePen.

CSS Grid center only vertical permalink

On the other hand, maybe you are looking to only center it vertically.

You can use the following CSS to achieve this.

.container {
display: grid;
align-items: center;
min-height: 100vh;
}

We use the align-items with a value of center to get a vertical alignment.

Note: This is as well the same functionality as we've seen in CSS Flex

This results in the following Codepen.

See the Pen CSS Grid most easy center vertical by Chris Bongers (@rebelchris) on CodePen.

There you go, we now learned another super-easy way to center elements using CSS Grid.

Thank you for reading, and let's connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter