On this article, we’ll have a look at 5 methods to horizontally and vertically heart a div utilizing CSS Grid. After all, these centering methods can be utilized on any sort of aspect. We’ve additionally lined how one can heart 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 display 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 extensive (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 have a look at the assorted methods to heart our div.
1. Heart a Div with CSS Grid and place-self
The place-self property gives a simple option to heart a grid merchandise horizontally and vertically. It’s used to heart a grid merchandise within the heart 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: heart;
}
See the Pen
Centering Utilizing Grid and place-self by SitePoint (@SitePoint)
on CodePen.
The place-self property is a shorthand for the justify-self (horizontal) and align-self (vertical) properties. You may experiment with them on this CodePen demo.
Utilizing place-self is especially helpful for centering particular person objects inside a grid, because it leaves the opposite grid objects free to be positioned in another way. Nevertheless it’s not the one option to heart a component with Grid, so let’s now have a look at another strategies.
2. Heart a Div with CSS Grid and place-items
Let’s now have a look at what’s concerned with utilizing Grid with place-items to heart our div.
The place-items property is shorthand for justify-items (horizontal) and align-items (vertical). These properties are utilized to the grid container reasonably than every grid merchandise, and are helpful after we need all grid objects to have the identical placement. (You may experiment with them on this CodePen demo.)
Let’s return to our check CSS and add the next code to the mother or father container:
article {
show: grid;
place-items: heart;
}
See the Pen
Heart an Component with CSS Grid and place-items by SitePoint (@SitePoint)
on CodePen.
As an experiment, we might add extra div components to the CodePen demo above to see what occurs. Every of the divs can 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 all the content material of a grid container ought to be aligned (that’s, all grid objects 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 heart it in its container.
Let’s replace our check CSS and add the next code to the mother or father container:
article {
show: grid;
place-content: heart;
}
As soon as once more, as proven beneath, our div is centered in its container.
See the Pen
Heart an Component with CSS Grid and place-content by SitePoint (@SitePoint)
on CodePen.
Just a few issues to notice right here. Firstly, in all our examples thus far we’ve used the worth of heart (for apparent causes). However every of the properties we’ve explored thus far has varied different values for putting objects. There are fairly just a few values for place-content (as you’ll be able to learn on on MDN), and two others can be used for centering our div: space-around and space-evenly. Attempt swapping out heart 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 heart our div, as seen on this demo.
4. Heart a Div with CSS Grid and Auto Margins
As at all times, we’ll goal the mother or father container with show: grid. We’ll additionally assign the div an computerized margin utilizing margin: auto. This makes the browser routinely calculate the obtainable area 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
Heart an Component with CSS Grid and Auto Margins by SitePoint (@SitePoint)
on CodePen.
Utilizing margins to align objects is a quite simple and highly effective trick. Take a look at this YouTube video to search out out a lot of different cool issues we will do with CSS margins.
5. Centering a Div with Grid Areas
The ultimate methodology we’ll cowl digs additional into the powers of Grid structure, as we’ll have a look at two methods to heart 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 deal with our div. We don’t even need to 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 extensive and 100px tall, after which we inform our div to begin on the second grid line and the second row line. (By default, it can solely span to the following grid line in every course.) Our div is, as soon as once more, positioned properly within the heart of its container, as proven beneath.
See the Pen
Heart a Div with CSS Grid by SitePoint (@SitePoint)
on CodePen.
The picture beneath exhibits the div sitting inside its grid tracks.
Grid structure provides varied alternative ways to realize 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 reside CodePen demo.
See the Pen
Heart a Div with CSS Grid by SitePoint (@SitePoint)
on CodePen.
The benefit of this structure methodology is that it may well simply incorporate a lot of different components positioned wherever and nevertheless we want. That’s the ability of Grid structure.
Conclusion
Every of those strategies lets us heart 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 reasonably than its container. However the entire strategies lined on this article are environment friendly and do the job very properly. There are all types of situations by which we would need to heart a component, so it’s vital to have a spread of instruments for attaining that objective.
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.
