Centralize uma Div verticalmente usando CSS

Este artigo apresentará métodos para centralizar um div em CSS verticalmente.

Use as propriedades top e transform no div interno para centralizar verticalmente o div usando CSS

Este método usa dois contêineres para demonstrar como centralizar um div verticalmente.

Primeiro, podemos criar um div externo e interno, onde centralizaremos o div interno verticalmente em relação ao div externo. Podemos usar as propriedades CSS transform e top para centralizar o div interno verticalmente.

A propriedade top define apenas a posição vertical dos elementos posicionados. A propriedade exibe um comportamento diferente de acordo com a propriedade de posição aplicada aos elementos.

Por exemplo, se position for definida como relative, a borda superior do elemento se moverá para baixo ou para cima de sua posição normal. A propriedade transform assume uma variedade de valores e translateY() é o que usaremos.

A função translateY() irá traduzir o elemento apenas do eixo Y. Podemos centralizar verticalmente um div usando essas duas propriedades.

Por exemplo, crie um elemento div e envolva-o com outro elemento div em HTML. Em CSS, selecione o div externo e defina height, width e cor de fundo para 180px, 300px e blue.

Em seguida, selecione o div interno e defina a propriedade position como relative. Em seguida, aplique red como a propriedade background-color e dê altura 20px ao div e use translateY(-50%) como o valor da propriedade transform.

No exemplo abaixo, o valor 50% da propriedade top colocará a borda superior do div interno na seção média vertical do div externo. No entanto, o div interno não está centralizado porque tem a height de 20px.

O valor translateY(-50%) moverá a borda superior com 50% de sua altura para cima. Ele se moverá para cima por causa do valor negativo, o que significa que o div se moverá 10px para cima. Desta forma, o div interno é centrado verticalmente.

Código de exemplo:

<div class='outer-div'>
 <div class='inner-div'>
 
 </div>
</div>

div.outer-div {
 height: 180px;
 width: 300px;
 background-color: blue;
}

div.inner-div {
 position: relative;
 background-color:red;
 height:20px;
 top: 50%;
 transform: translateY(-50%);
}

Use o CSS Flexbox para centralizar verticalmente o div no CSS

Podemos criar um contêiner flexível e usar as propriedades justify-content e align-items para centralizar verticalmente o div em CSS. Podemos usar a propriedade display para definir o container como um flexbox.

A propriedade justify-content irá alinhar horizontalmente os elementos no flexbox. Leva várias opções como flex-start, flex-end, center, etc.

Da mesma forma, a propriedade align-items irá posicionar verticalmente os elementos dentro do flexbox.

Por exemplo, crie um div com a classe box e crie outro div dentro dele. Escreva algum texto dentro do div interno.

Selecione as tags body e html em CSS e defina a altura para 100%. Em seguida, selecione a classe caixa e defina sua height para 100%.

Defina background como red e a propriedade display como flex. Por último, defina o valor center para as propriedades justify-content e align-items.

O exemplo abaixo irá centralizar verticalmente e horizontalmente o texto dentro do div. Podemos usar essas duas propriedades apenas dentro de um contêiner flexível.

Assim, podemos centralizar um div usando o flexbox.

Código de exemplo:

<div class="box">
 <div>The Div</div>
</div>

html,body {
 height: 100%;
}

.box {
 height: 100%;
 background: red;
 display: flex;
 justify-content: center;
 align-items: center;
}