Vertically align block children?

I don’t know how many ways we’ve tried to center children in a parent element. But guess what? We now have another method that can help us vertically align all the good stuff inside. This one works without needing to use flexbox or grid. Just take a block element and use ‘align-content’.

.container {
  align-content: center;
}

You can also use keywords like ‘start’ and ‘end’ as well. What a one-liner, right?