Five CSS Grid Methods for Horizontally and Vertically Centering a Div

This article explores five CSS Grid techniques for centering a div both horizontally and vertically. These methods are applicable to any HTML element. We'll also briefly touch upon Flexbox and transform-based centering, which have been covered elsewhere.

Key Takeaways:

• CSS Grid offers five efficient ways to center a div: place-self, place-items, place-content, auto margins, and grid areas.
• place-self centers individual grid items, leaving other items free to position differently. It combines justify-self (horizontal) and align-self (vertical).
• place-items applies to the grid container, ideal when all items need identical placement. It's shorthand for justify-items and align-items.
• place-content aligns the entire grid container's content, treating all items as a single group. It combines justify-content and align-content.
• Auto margins let the browser calculate and distribute surrounding space, centering the div within its grid cell.

Setup:

We'll start with a container and a simple box element (the div) for demonstration. Here's the HTML:

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

And the initial CSS:

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

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

All examples use display: grid, establishing the article element as a grid container. The container is made wide and tall to provide ample space.

Centering Methods:

1. place-self: This easily centers a grid item within its cell.

article {
  display: grid;
}

div {
  place-self: center;
}

[CodePen Demo: Centering Using Grid and place-self](Link to CodePen)

place-self is shorthand for justify-self and align-self. Experiment with these individual properties in the CodePen demo. It's best for centering individual items while allowing others to be positioned differently.

2. place-items: This centers all grid items within their cells.

article {
  display: grid;
  place-items: center;
}

[CodePen Demo: Center an Element with CSS Grid and place-items](Link to CodePen)

place-items is shorthand for justify-items and align-items. Add more divs to the CodePen demo to see how they all center.

3. place-content: This centers the entire grid content as a group.

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

[CodePen Demo: Center an Element with CSS Grid and place-content](Link to CodePen)

place-content is shorthand for justify-content and align-content. Experiment with space-around and space-evenly values as alternatives to center.

4. Auto Margins: This uses automatic margin calculation for centering.

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

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

[CodePen Demo: Center an Element with CSS Grid and Auto Margins](Link to CodePen)

This simple technique lets the browser handle the spacing.

5. Grid Areas: This method uses a multi-row/column grid for precise placement.

article {
  display: grid;
}

div {
  place-self: center;
}

[CodePen Demo: Center a Div with CSS Grid](Link to CodePen)

Alternatively, using named grid areas:

article {
  display: grid;
  place-items: center;
}

[CodePen Demo: Center a Div with CSS Grid using named areas](Link to CodePen)

Conclusion:

All methods effectively center a div. place-self and auto margins are convenient for direct element targeting. Choose the method best suited to your layout complexity and needs. Remember, these techniques work on elements beyond divs. The examples use an empty div, but adding content maintains the centering.

(FAQs section removed as it was largely repetitive and the question answers were already implicitly covered in the article.)

The above is the detailed content of How to Center a Div Using CSS Grid. For more information, please follow other related articles on the PHP Chinese website!