Recently I came across this neat little trick that allows you to vertically center an item across columns in a grid using flexbox. We have these little comparison cards on a recent client project. Normally on these cards we'd bottom align price + CTA. And we've been switching those to flexbox where possible. But before that we'd use JS to align them and set equal heights — I know ugly.
This new task was to not only keep the bottom alignment of the price + CTA, but also vertically center the product titles (relative to each other). I definitely didn't want to keep using JS to solve these problems. Mainly because they're not very good for performance. Luckily flexbox is able to take care of this problem.
We start off with setting
display: flex on the card, with the
flex-flow property set to
column nowrap because we want the children to stack. The price and call-to-action can be bottom-aligned with a simple
margin-top: auto. But we an also vertically center the title's with that same property.
I was amazed by how simple it was. No more JS to calculate heights, offsets, update margins, and redo all that work on resize.