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.
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
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;
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,
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
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
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;
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;
(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;
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,
place-items Applies to containers, which gives it slightly less flexibility.
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
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.