Centralização vertical com o Flexbox

A centralização vertical de conteúdos filhos irmãos é uma tarefa que há muito tempo precisamos na Web, mas que sempre pareceu muito mais difícil do que deveria ser. Inicialmente, usamos tabelas para realizar a tarefa, depois passamos a usar truques de CSS e JavaScript porque o layout de tabela era terrivelmente ineficiente, mas parecia que as tabelas eram a maneira mais fácil e confiável de centralizar verticalmente. Quando o vertical-align CSS foi introduzida, fiquei incrivelmente empolgado, mas logo descobri que ela geralmente não fazia o que eu queria.

Depois de brincar com o flexbox para o DevTools Debugger, descobri que align-items: center; é o herói de que sempre precisei.

Vamos considerar a seguinte marcação HTML que apresenta conteúdos de alturas variadas:

<div class="parent">
  <div>Hello!</div>
  <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p></div>
  <div><img src="https://davidwalsh.name/wp-content/themes/punky/images/logo.png" style="display: inline;"></div>
</div>

Se quisermos que o conteúdo de cada elemento seja centralizado verticalmente, podemos usar flexbox e align-items para que isso aconteça:

.parent {
    display: flex;
    align-items: center;
}

O Flexbox sempre foi prometido como o salvador do layout da Web, mas parece ter sido um pouco substituído pela grade CSS; estou feliz que o Flexbox tenha resolvido o problema de alinhamento vertical que nos causou pesadelos por tanto tempo!