Alinhamento vertical

Um problema recorrente quando se desenvolve layouts é o alinhamento vertical. Existem diversas opções disponíveis, usando pseudo-elementos, inserir outro elemento depois, usar javascript… Uma solução elegante pra esse problema utiliza a propriedade transform do CSS3.

.pai {
	background-color:red;
	height:200px;
	width:200px;
}
.filho {
	background:yellow;
	width:50px;
	height:50px;
	margin:auto;
}

	
filho

Utilizaremos o html/css acima pra essa solução.

Primeiramente adicionaremos position: relative para a posição usar o pai como referência. Colocaremos também top:50% para o elemento ir para o centro do pai.

Como visto no exemplo acima, o elemento não fica exatamente centralizado, pois o top coloca usando a parte superior do filho como base. Isso significa que ao usarmos top, estaremos no centro do elemento pai, porém com a parte superior do elemento filho. É aí que entra o pulo do gato!

Quando se utiliza valores normais (px, em, etc) no CSS3 transform, o elemento filho é baseado no valor do elemento pai. Porém quando utiliza-se porcentagens, o valor baseado é do próprio elemento filho! Com isso adicionaremos transform:translateY(-50%) (deve-se colocar os prefixos dos browsers também, -moz, -webkit) e o elemento vai ser translatado em seu próprio eixo 50% para cima, ficando exatamente no local desejado.

O único contra dessa solução é que não funciona no IE8 e anteriores (seria isso realmente um contra? :) como pode ser visto no http://caniuse.com/transforms2d.

Segue o código final:

.pai {
	background-color:red;
	height:200px;
	width:200px;
}
.filho {
	background:yellow;
	width:50px;
	height:50px;
	margin:auto;
	position:relative;
	top:50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
    transform: translateY(-50%);
}