How to Center a Div Using CSS Grid

In this article, we’ll look at four ways to center a div both horizontally and vertically using CSS Grid. Of course, these centering techniques can be used on any type of element. We’ve previously covered centering elements horizontally and vertically using flexbox and positioning with transformation.

establishment

Let’s first create a container with a simple box element that we’ll use to demonstrate these centering methods. Here’s the HTML:

<article>
  <div>div>
article>

And here’s our starting CSS:

article 
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;


div 
  width: 200px;
  background: yellow;
  height: 100px;

In all of our examples, we’ll use display: grid Property. it installs

The element as a grid container and generates a block-level grid for that container. (here is Our Demo Template on Codepen If you want to experiment with it.)

Now, let’s look at the different ways to center your div.

1. Center a div with css grid and place-self

My favorite way to center an element with a grid is to use place-self Property. (You can read more about Here,

Centering our div is as easy as:

article 
  display: grid;


div 
  place-self: center;

see pen
Centering Using Grid and Place-Self by sitepoint (@SitePoint,
Feather codepen,

place-self is a shorthand for property align-self (vertical) and justify-self (horizontal) properties (which are useful if you’re only centered along one axis). you can experiment with them in this codepen demo,

using the place-self So simple that it’s an obvious go-to solution. But this isn’t the only way to center an element with a grid, so let’s look at some other ways.

benefit from using place-self is that it applies to the element being focused, which means you can use it to focus other elements in the same container as well. (Try adding more div elements to the CodePen demo and see what happens.)

2. Center a div with css grid, justify-content and align-items

Let us now see what is involved in using Grid with justify-content And align-items to center our div.

justify-content The property is used to horizontally align the items of the container when the items do not use all available space. There are many ways to set justify-content property, but here we’re going to set it center,

absolutely love justify-content Property, align-items The property is used to align the content in the container, but it also vertically aligns the content horizontally.

Let’s return to our test HTML and add the following code to the parent container:

article 
  display: grid;
  justify-content: center;
  align-items: center;

see pen
Centering, Self Aligning, and Self Justifying Using the Grid by sitepoint (@SitePoint,
Feather codepen,

An obvious advantage of this approach is that it involves less code, since the centralization is handled by the container. But in some ways targeting the div through its container is also a disadvantage, as any other elements in the container will be affected as well.

3. Center a Div with CSS Grid and Auto Margins

As always, we’ll target the parent container with display: grid, We will also assign an automatic margin to the div using margin: auto, This makes the browser automatically calculate the available space around the child div and split it vertically and horizontally, keeping the div in the center: 

article 
  display: grid;


div 
  margin: auto;

see pen
Center an element with css grid, justify-content and align-items by sitepoint (@SitePoint,
Feather codepen,

(as an aside, there are so many other cool things you can do With css margin.)

4. Center a Div with CSS Grid and Place-Items

place-items The property is used to align items vertically and horizontally in a grid. This can be used to center our div by targeting the container like this:

article 
  display: grid;
  place-items: center;

see pen
Center a Div with CSS Grid and Auto Margins by sitepoint (@SitePoint,
Feather codepen,

like place-self Property, place-items In this case, the shorthand for the two properties is justify-items (horizontal) and align-items (Stand). you can experiment with them in this codepen demo,

Unlike the place-self, place-items Applies to containers, which gives it slightly less flexibility.

conclusion

Each of these methods lets you center a div both horizontally and vertically within a container. as i said, my preference is place-self method, mainly because it applies to the element being focused, rather than the container. same for margin: auto way. But of course, if you want to center your element in only one direction, you can use either align-self either justify-self,

In the demo examples, we’ve only used an empty div, but of course you can add content to the div and the centering will still work. And, once again, these centering techniques work on elements other than divs.

Further reading:

Post Views: 20

Leave a Reply