Friday, September 30, 2022
HomeWebsite DesignLearn how to Middle a Div Utilizing CSS Grid

Learn how to Middle a Div Utilizing CSS Grid


On this article, we’ll take a look at 4 methods to horizontally and vertically middle a div utilizing CSS Grid. After all, these centering strategies can be utilized on any form of factor. We’ve beforehand lined the right way to middle parts horizontally and vertically utilizing Flexbox and positioning with transforms.

Setting Up

Let’s first create a container with a easy field factor inside it that we’ll use to reveal these centering strategies. Right here’s the HTML:

<article>
  <div></div>
</article>

And right here’s our beginning CSS:

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  show: grid;
}

div {
  width: 200px;
  background: yellow;
  top: 100px;
}

Our starting position, with a yellow square sitting top left in a black container

In all our examples, we’ll be utilizing the show: grid property. This establishes the <article> factor as a grid container and generates a block-level grid for that container. (Right here’s our demo template on CodePen if you wish to experiment with it.)

Now, let’s take a look at the assorted methods to middle our div.

1. Middle a Div with CSS Grid and place-self

My favourite technique to middle a component with Grid is to make use of the place-self property. (You’ll be able to learn extra about it right here.)

Centering our div is so simple as this:

article {
  show: grid;
}

div {
  place-self: middle;
}

See the Pen
Centering Utilizing Grid and place-self
by SitePoint (@SitePoint)
on CodePen.

The place-self property is a shorthand for the align-self (vertical) and justify-self (horizontal) properties (that are helpful for those who’re simply centering alongside one axis). You’ll be able to experiment with them on this CodePen demo.

Utilizing place-self is so easy that it’s an apparent go-to answer. However it’s not the one technique to middle a component with Grid, so let’s now take a look at another strategies.

A bonus of utilizing place-self is that it’s utilized to the factor being centered, that means you can additionally use it to middle different parts in the identical container. (Strive including extra div parts to the CodePen demo and see what occurs.)

2. Middle a Div with CSS Grid, justify-content and align-items

Let’s now take a look at what’s concerned with utilizing Grid with justify-content and align-items to middle our div.

The justify-content property is used to align the container’s objects horizontally when the objects don’t use all of the obtainable house. There are lots of methods to set the justify-content property, however right here we’re simply going to set it to middle.

Identical to the justify-content property, the align-items property is used to align the content material in a container, but it surely aligns content material vertically slightly than horizontally.

Let’s return to our check HTML and add the next code to the dad or mum container:

article {
  show: grid;
  justify-content: middle;
  align-items: middle;
}

See the Pen
Centering Utilizing Grid, align-self and justify-self
by SitePoint (@SitePoint)
on CodePen.

An obvious benefit of this methodology is that it includes much less code, because the centering is dealt with by the container. However in some methods it’s additionally an obstacle to focus on the div through its container, as another factor within the container may even be affected.

3. Middle a Div with CSS Grid and Auto Margins

As at all times, we’ll goal the dad or mum container with show: grid. We’ll additionally assign the div an computerized margin utilizing margin: auto. This makes the browser routinely calculate the obtainable house surrounding the kid div and divide it vertically and horizontally, inserting the div within the center:

article {
  show: grid;
}

div {
  margin: auto;
}

See the Pen
Middle an Aspect with CSS Grid, justify-content and align-items
by SitePoint (@SitePoint)
on CodePen.

(As an apart, there are a number of different cool issues you are able to do with CSS margins.)

4. Middle a Div with CSS Grid and place-items

The place-items property is used to align objects vertically and horizontally in a grid. It may be used to middle our div by concentrating on the container like this:

article {
  show: grid;
  place-items: middle;
}

See the Pen
Middle a Div with CSS Grid and Auto Margins
by SitePoint (@SitePoint)
on CodePen.

Just like the place-self property, place-items is shorthand for 2 properties, on this case justify-items (horizontal) and align-items (vertical). You’ll be able to experiment with them on this CodePen demo.

In distinction to place-self, place-items is utilized to the container, which supplies it barely much less flexibility.

Conclusion

Every of those strategies enables you to middle a div horizontally and vertically inside a container. As I mentioned, my desire is the the place-self methodology, primarily as a result of it’s utilized to the factor being centered slightly than the container. That’s the identical for the margin: auto methodology. However in fact, for those who’re solely seeking to middle your factor in a single route, you may also use both align-self or justify-self.

Within the demo examples, we’ve simply used an empty div, however in fact you’ll be able to add content material to the div and the centering will nonetheless work. And, as soon as once more, these centering strategies work on parts apart from divs.

Additional studying:

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments