My WebDev Notes: Center page elements with CSS Grid
Tags: html, css
Published: 2020-04-03 21:30:15

---
title:  My WebDev Notes: Center page elements with CSS Grid
published: true
description: How to center page elements using CSS Grid
tags: html, css
series:  My WebDev Notes
---

> Inspired by the following tweet:

> {% twitter 1245399999300558853 %}

##__Introduction__

One way or the other we've all been in a situation where we need to center HTML page elements with CSS. Prior to the [CSS Grid](https://dev.to/ziizium/css-grid-part-1-3f57), we've resolved to use _margins_ or another method we can think of which can require extra HTML code because we'll have to provide a wrapper around the element we want to be centered. 

An example of using _margins_ can resemble the snippet below:

```css
.selector {
    /* Other properties here */
    
    margin: 0 auto;
}
```

The snippet above is still valid but in certain cases, it requires extra HTML markup.

Take a look at the HTML code below:

```html
<body>
    <div class="container">
        <!-- contents here -->
    </div>
</body>
```

If you plan to center the <code>div></code> element, with margins the CSS could be:

```css
.container {
    width: 65%
    margin: 0 auto;
}
```

##__How margin centering works__

The <code>margin</code> property is a shorthand property for four other properties which are are used to apply margins around the four sides of a block element i.e _top_, _right_, _left_, and _bottom_.

These properties are:

* <code>margin-top</code>
* <code>margin-right</code>
* <code>margin-bottom</code>
* <code>margin-left</code>

The <code>margin</code> property can accept _one_, _two_, _three_, or _four values_. How the browser applies the margin based on the numbers of values you supply is given below:

| Margin value | Browser computed value           |
| ------------- |:-------------:|
|<code>margin: 2em;</code>| <code>margin-top: 2em;</code> <code>margin-right: 2em;</code> <code>margin-bottom: 2em;</code> <code>margin-left: 2em;</code>|
|<code>margin: 1em 2em;</code>| <code>margin-top: 1em;</code> <code>margin-right: 2em;</code> <code>margin-bottom: 1em;</code> <code>margin-left: 2em;</code>|
|<code>margin: 1em 2em 3em;</code>| <code>margin-top: 1em;</code> <code>margin-right: 2em;</code> <code>margin-bottom: 3em;</code> <code>margin-left: 2em;</code>|
|<code>margin: 1em 2em 3em 4em;</code>| <code>margin-top: 1em;</code> <code>margin-right: 2em;</code> <code>margin-bottom: 3em;</code> <code>margin-left: 4em;</code>|

From the table above you should note the following:

* When you supply _two_ values to the `margin` property, the _first_ value is applied to the _top_ and _bottom_ and the _second_ value is applied to the _left_ and _right_
* When you supply _three_ values to the `margin` property, the _first_ value is applied to the _top_ the _second_ value is applied to the _left_ and _right_ and the _third_ value is applied to the _bottom_
* When you supply a _single_ value it gets applied to all _four_ sides
* When you supply _four_ values, the _first_ value gets applied to the _top_, the _second_ value to the _right_ the _third_ value to the _bottom_ and the _fourth_ value to the _left_

The <code>margin</code> property also accepts `0` in which case margins are not applied on all four sides and the keyword <code>auto</code> which tells the browser to automatically determine the margins on all four sides and in turn the element will be at the center of its container (_you see where am going?_).

Therefore when you use the snippet below:

```css
.selector {
    margin: 0 auto;
}
```
This is what you are telling the browser:

* Kindly use a <code>margin-top</code> and <code>margin-bottom</code> values of <code>0</code> and use a <code>margin-left</code> and <code>margin-right</code> values with a value of <code>auto</code>

This will result in the browser placing the item at the center of the element's container.

This is what takes to center an element using _margins_, CSS Grid makes this entire process _easy_.

##__How to center elements with CSS Grid__

Centering element in CSS Grid is literally two lines:

```css
.selector {
    /* Other properties to style the element */
    display: grid;
    place-items: center;
}
```

That's it. At the time of writing the <code>place-items</code> property has [global support of 88.84% based on data on Can I use](https://caniuse.com/#search=place-items).

_Have fun!_.