DEV Community

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

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.

Top comments (0)