On this article, we’ll take a look at 5 methods to horizontally and vertically middle a div utilizing CSS Grid. After all, these centering methods can be utilized on any type of aspect. We’ve additionally coated find out how to middle components horizontally and vertically utilizing Flexbox and positioning with transforms.
Setting Up
Let’s first create a container with a easy field aspect inside it that we’ll use to show these centering strategies. Right here’s the HTML:
<article>
<div></div>
</article>
Right here’s our beginning CSS:
article {
width: 100%;
min-height: 100vh;
background: black;
show: grid;
}
div {
width: 200px;
background: yellow;
peak: 100px;
}
In all our examples, we’ll be utilizing the show: grid property. This establishes the <article> aspect as a grid container and generates a block-level grid for that container. We’ve made the grid container broad (width: 100%) and tall (min-height: 100vw) in order that there’s loads of room for our div to maneuver round in. (Right here’s our demo template on CodePen if you wish to experiment with it.)
Now, let’s take a look at the varied methods to middle our div.
1. Heart a Div with CSS Grid and place-self
The place-self property supplies a simple solution to middle a grid merchandise horizontally and vertically. It’s used to middle a grid merchandise within the middle of its grid cell (assuming that the grid cell is wider and taller than the grid merchandise, which it’s in our instance).
Centering our div is so simple as this:
article {
show: grid;
}
div {
place-self: middle;
}
See the Pen
Centering Using Grid and place-self by Pylogix (@Pylogix)
on CodePen.
The place-self property is a shorthand for the justify-self (horizontal) and align-self (vertical) properties. You possibly can experiment with them in this CodePen demo.
Utilizing place-self is especially helpful for centering particular person gadgets inside a grid, because it leaves the opposite grid gadgets free to be positioned in another way. However it’s not the one solution to middle a component with Grid, so let’s now take a look at another strategies.
2. Heart a Div with CSS Grid and place-items
Let’s now take a look at what’s concerned with utilizing Grid with place-items to middle our div.
The place-items property is shorthand for justify-items (horizontal) and align-items (vertical). These properties are utilized to the grid container somewhat than every grid merchandise, and are helpful after we need all grid gadgets to have the identical placement. (You possibly can experiment with them in this CodePen demo.)
Let’s return to our take a look at CSS and add the next code to the mother or father container:
article {
show: grid;
place-items: middle;
}
See the Pen
Center an Element with CSS Grid and place-items by Pylogix (@Pylogix)
on CodePen.
As an experiment, we might add extra div components to the CodePen demo above to see what occurs. Every of the divs will likely be centered horizontally and vertically inside its grid cell, as proven within the picture beneath (through the browser’s grid inspector).
3. Heart a Div with place-content
The place-content property is shorthand for justify-content (horizontal) and align-content (vertical). Whereas place-self and place-items govern how a grid merchandise is positioned inside its designated grid cell, place-content specifies how your entire content material of a grid container must be aligned (that’s, all grid gadgets thought of as one group). In our demo, there’s just one grid merchandise (our single, yellow div), so we will additionally use place-content to middle it in its container.
Let’s replace our take a look at CSS and add the next code to the mother or father container:
article {
show: grid;
place-content: middle;
}
As soon as once more, as proven beneath, our div is centered in its container.
See the Pen
Center an Element with CSS Grid and place-content by Pylogix (@Pylogix)
on CodePen.
A couple of issues to notice right here. Firstly, in all our examples up to now we’ve used the worth of middle (for apparent causes). However every of the properties we’ve explored up to now has numerous different values for putting gadgets. There are fairly a number of values for place-content (as you possibly can read on on MDN), and two others can be used for centering our div: space-around and space-evenly. Attempt swapping out middle for these values within the Pen above.
Additionally, in our easy instance of a div being centered in a container, we will even combine and match properties we’ve seen above. We might use justify-content and align-items to middle our div, as seen in this demo.
4. Heart a Div with CSS Grid and Auto Margins
As all the time, we’ll goal the mother or father container with show: grid. We’ll additionally assign the div an automated margin utilizing margin: auto. This makes the browser mechanically calculate the obtainable house surrounding the div and divide it vertically and horizontally inside its grid cell, inserting the div within the center:
article {
show: grid;
}
div {
margin: auto;
}
See the Pen
Center an Element with CSS Grid and Auto Margins by Pylogix (@Pylogix)
on CodePen.
Utilizing margins to align gadgets is a quite simple and highly effective trick. Take a look at this YouTube video to search out out numerous different cool things we can do with CSS margins.
5. Centering a Div with Grid Areas
The ultimate technique we’ll cowl digs additional into the powers of Grid format, as we’ll take a look at two methods to middle our div inside a grid with a number of rows and columns.
Right here’s our important CSS:
article {
show: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: 1fr 100px 1fr;
}
div {
background: yellow;
grid-column: 2;
grid-row: 2;
}
Now we’re explicitly laying out a grid, with an space within the center to accommodate our div. We don’t even should set dimensions on our div now, because the grid tracks will deal with that. We specify a grid cell in the midst of the grid that’s 200px broad and 100px tall, after which we inform our div to begin on the second grid line and the second row line. (By default, it is going to solely span to the subsequent grid line in every course.) Our div is, as soon as once more, positioned properly within the middle of its container, as proven beneath.
See the Pen
Center a Div with CSS Grid by Pylogix (@Pylogix)
on CodePen.
The picture beneath reveals the div sitting inside its grid tracks.
Grid format provides numerous other ways to attain this end result. Let’s finish by doing the identical factor as above, however this time utilizing a named space for our div:
article {
show: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: 1fr 100px 1fr;
grid-template-areas: ". . ."
". field ."
". . .";
}
div {
background: yellow;
grid-area: field;
}
Right here, we’re setting a grid-area named field after which describing the place it ought to sit on the grid, specifying which grid cells are empty with a easy dot (.).
Beneath is a stay CodePen demo.
See the Pen
Center a Div with CSS Grid by Pylogix (@Pylogix)
on CodePen.
The benefit of this format technique is that it could simply incorporate numerous different components positioned wherever and nevertheless we need. That’s the ability of Grid format.
Conclusion
Every of those strategies lets us middle a div horizontally and vertically inside a container. The place-self and margin: auto choices are good in that they’re utilized on to the aspect being centered somewhat than its container. However all the strategies coated on this article are environment friendly and do the job very properly. There are all kinds of situations by which we’d need to middle a component, so it’s necessary to have a spread of instruments for reaching that purpose.
Within the demo examples, we’ve simply used an empty div, however after all we will add content material to the div and the centering will nonetheless work. And, as soon as once more, these centering methods work on components apart from divs.
