In modern CSS I'd try this: make a super element around the header and content, set the min-height of that to 100vh, and the display to flexbox, with flex-flow: column nowrap; and then align-items: center;
But watch out for 100vh on mobile. It doesn't account for the sometimes there, sometimes not there address bar.
To solve that, there's svh (small), lvh (large), and dvh (dynamic).
If you want to make a div stretch to the height of the window, so that something can appear exactly at the bottom before scrolling,
{
height: 100vh;
height: 100svh;
}
works best... the first line is there as a fallback for the few browsers that don't yet support svh... and if svh is supported it will replace the first line.
These modern days I'd personally skip over flexbox and use CSS Grid. I find grid-template-areas such a nicer to read map than trying to decipher complex nests of flexbox and I'm finding more every day that I prefer CSS Grid even in places that don't seem to be 2D layouts yet and could just be 1D flexbox.
