DEV Community

Cover image for Today I learned about "place-items"
Hendrik
Hendrik

Posted on

Today I learned about "place-items"

Today I learned about the CSS property place-items, it allows you to easily position elements in flex and grid layouts. It also solves the eon old quest to "center something in a div".

To center the single child of a div simply add display: grid; and place-items: center;.

Center elements in a div using display:grid and place-items:center.

Place-items takes up to two parameters. The first to place the items vertically and the second to place them horizontally.

Examples of place-items.

This concludes out TIL, see you next time.

.wrapper-that-centers {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Teacher Emoji for TIL.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️