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;
}
Top comments (0)