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. But in this code example we'll be using CSS Grid.
Much like Flexbox, it's super easy to center an HTML element using CSS Grid.
To fully center an item all the CSS code we need is:
The min-height property is optional. In this case it's needed to give the html canvas a vertical height.
Above code to align an item horizontally and vertically will result in the following codepen example:
CSS Grid center horizontally permalink
If for instance you only want to center an element horizontally you can use the following CSS grid code:
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
This code results in the following Codepen:
CSS Grid center vertically permalink
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:
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
See the example code in the following Codepen:
There you go! We now learned another super-easy way to center elements horizontally, vertically or both using