This article is ten years old; thought that worth flagging. Nowadays I find myself more comfortable using flexbox and grids to manage these kinds of layout subtleties. Or when in complete dismay, using the `top:50%;left:50%;translate(-50%,-50%)` hack. I find inline elements less reliable and less 'knowable', especially in responsive layouts. I think I only end up using vertical-align in incredibly narrow use-cases. Though curious to hear other peoples' experiences.

same experience for me, but cool breakdown and i dig the UX of the page

I think the proliferation of grid and flexbox lets us use vertical-align for its original intended purpose, with text.

Flexbox is great, but it doesn't eliminate the need to understand line layout sometimes. There's almost alway text on the page somewhere, even if the container it's in was laid out with flex or grid.