Recently I saw this tweet float by:
CSS experts, I need your help! 👇
I need a container that vertically centers its children and that can be scrollable if necessary.
It should be a single container. Not 2.
— Álvaro Trigo 🐦🔥 (@IMAC2) September 24, 2021
Now that sounds like a job for CSS Grid to me!
The code is documented, yet the key part here is to:
grid-auto-rows: 100vh(or soon
100dvh) on the container to place the children inside rows of
place-items: center;on the container to center the items themselves inside their assigned row.
Because we’re using
grid-auto-rows, the code will work with any number of direct children in the container.