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;.

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

This concludes out TIL, see you next time.

.wrapper-that-centers {
  display: grid;
  place-items: center;
}