It's still a huge PITA and requires all sorts of subtle understandings. Even in tailwindcss it's not simple, you need to think about what kind of element is it (block or not), is it text or not, what layout is on the parent, yada yada yada.
Here's a puzzle I had from the olden days: how do you do webpages with header and footer such that the footer is always at least as far down as the window height, but if the content is less than enough to push the footer below the fold it should be centered.
I remember that being far harder than it needed to be. I was a child though so maybe I just didn't get CSS well enough.
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.
Really wasnt a great experience... You could do similar with tables, everything was tables. But you had to keep your open and close in check across the page. Templating frameworks were less flexible earlier on. Sucked when say a large corporate team did headers and footers separate from your app team.
