Centralização vertical CSS com Flexbox

Tenho 31 anos e sinto que estou no mundo do desenvolvimento da Web há séculos. Sempre soubemos que os layouts em CSS eram um pesadelo e todos nós consideramos o flexbox nosso salvador. Ainda não se sabe se isso vai acontecer, mas o flexbox resolve facilmente um problema que o CSS tem há muito tempo: A centralização vertical do CSS. Vou mostrar ao senhor como é fácil!

A centralização vertical requer um elemento pai e um elemento filho…

<div class="flexbox-container">
	<div>Blah blah</div>
	<div>Blah blah blah blah blah ...</div>
</div>

…mas somente o elemento pai precisa de propriedades CSS definidas para a centralização vertical dos elementos filhos:

.flexbox-container {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
}

Além dos prefixos do fornecedor, esse é um CSS simples! Centralização vertical sem flexbox é, na melhor das hipóteses, uma esperança, por isso é animador saber que o futuro dos layouts CSS facilitará essa tarefa. Ainda não estou convencido de que o flexbox resolverá todos os problemas de layout do mundo da Web, mas resolver a centralização vertical é um grande trunfo.