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. In this tutorial, we’ll use CSS Grid to center horizontally and vertically.
Like Flexbox, it’s super easy to center an HTML element using CSS Grid.
To entirely center an item with CSS grid, all the CSS code we need is:
.container {
display: grid;
place-items: center;
min-height: 100vh;
}
The min-height property is optional. In this case, it’s needed to give the HTML canvas a vertical height.
The above code to align an item horizontally and vertically with CSS grid will result in the following CodePen example:
See the Pen CSS Grid most easy center vertical and horizontal by Chris Bongers (@rebelchris) on CodePen.
CSS Grid center horizontally
If for instance, you only want to center an element horizontally you can use the following CSS grid code:
.container {
display: grid;
justify-content: center;
min-height: 100vh;
}
We can use the justify-content property and pass the center value to make it horizontally centered.
Note: this is the same use as for
display: flex.
This code results in the following Codepen:
See the Pen CSS Grid most easy center horizontal by Chris Bongers (@rebelchris) on CodePen.
CSS Grid center vertically
On the other hand, maybe you are looking to only center an item vertically.
In CSS grid, you can use the following code to achieve this:
.container {
display: grid;
align-items: center;
min-height: 100vh;
}
We use the align-items with a value of center to get the vertical alignment on the item.
Note: This is as well the same functionality as we’ve seen in
CSS Flex
See the example code 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 horizontally, vertically, or both using CSS Grid.
Thank you for reading, and let’s connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
