Como centralizar verticalmente elementos dentro de uma div com CSS

Como centralizar verticalmente elementos dentro de uma div com CSS

Só quem trabalha com web design sabe o quanto pode ser complicado centralizar um elemento verticalmente na página ou dentro de outro elemento. Neste artigo vou explicar 3 alternativas diferentes para te ajudar a solucionar esse problema de uma vez por todas! 🤩

Centralizar verticalmente com display: table

Em tabelas podemos centralizar verticalmente os elementos de dentro de uma célula usando vertical-align: middle. Caso você esteja usando uma div ou outro elemento que não seja uma tabela você pode usar display: table-cell para que o mesmo se comporte como uma.

.externo {
	display: table-cell;
	vertical-align: middle;
	height:500px;
	width:500px;
	background-color:gold;
}

.interno {
	height:50px;
	width:50px;
	background-color:coral;
}
<div class="externo">
    <div class="interno"></div>
</div>

Centralizar verticalmente com position: absolute

Outra forma muito utilizada é utilizar position: absolute para centralizar um elemento verticalmente.

.externo {
    position:relative;
    background-color:gold;
    height:500px;
    width:500px;
}

.interno {
    background-color:coral;
    height:50px;
    width:50px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
<div class="externo">
    <div class="interno"></div>
</div>

No código acima foi usado o top 50% para posicionar o topo do elemento no centro e utilizamos o translateY para recuar metade da sua altura total para a cima.

Lembrando que para funcionar, o position do elemento externo deve ser: relative, fixed, absolute ou sticky.

Centralizar verticalmente com flexbox

A melhor maneira de centralizar um elemento verticalmente com CSS com certeza é utilizando CSS3 Flexbox:

.externo {
    position:relative;
    background-color:gold;
    height:500px;
    width:500px;
    /* display flex */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* centraliza na vertical */
    align-items: center;
}

.interno {
    background-color:coral;
    height:50px;
    width:50px;
}
<div class="externo">
    <div class="interno"></div>
</div>

Declaramos o elemento externo com display: flex e align-items: center para centralizar o elemento interno na vertical.

BÔNUS: Centralizar verticalmente ícones, texto e imagens em uma linha

Quando usamos uma imagem ou ícone dentro de um parágrafo na mesma linha junto com texto, é normal que a imagem fique desalinhada.

Para alinhar a imagem verticalmente com o texto é só adicionar vertical-align:middle na imagem, igual no exemplo abaixo:

p {
	font-size:50px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}
p img {
	vertical-align:middle;
}
<p><img src="whatsapp.png" /> whatsapp</p>

Referências