# CSS Grid most easy center vertical and horizontal

As a follow up on the [CSS Flex center article](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/).

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:

```css
.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:

%[https://codepen.io/rebelchris/pen/WNGQxxB]

## CSS Grid center only horizontal

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

```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`](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/#heading-css-flexbox-horizontal-center).

This results in the following Codepen.

%[https://codepen.io/rebelchris/pen/GRjpqjX]

## CSS Grid center only vertical

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

You can use the following CSS to achieve this.

```css
.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`](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/#heading-css-flexbox-vertical-center)

This results in the following Codepen.

%[https://codepen.io/rebelchris/pen/VwKvjmQ]

There you go, we now learned another super-easy way to center elements 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)