Dificuldades para centralizar uma div na vertical? Seguindo esse passo a passo você conseguirá fazer isso sem ter que fazer o uso de gambiarras.

Esse tutorial é para quem ainda não aprendeu flexbox ou para você que ainda não entrou na onda dos frameworks como Bootstrap. Pois centralizar uma div na vertical sempre foi uma dor de cabeça para os Front-ends, mas depois do surgimento do flexbox essa tarefa ficou mais fácil. Isso sem falar no Bootstrap que já vem com os códigos todos prontos.

Mas se você está aqui é porque ainda não aprendeu a usar essas duas tecnologias. Então mãos na massa e vamos aprender como  centralizar uma div na vertical e horizontal.

Primeiro passo

No seu editor html preferido crie duas divs, veja abaixo um exemplo. (A div roxa será a maior e a div amarela a menor ).

Div 1 - posicionamento de divs css

Segundo passo

Agora no segundo passo iremos dar forma a essas duas divs e para isso usaremos o css. A roxa sendo a maior terá 500px e a amarela 200px. Veja abaixo como tem que ficar o css.
código css
Com esse código acima conseguimos criar as duas box, mas ainda falta deixa-las centralizadas. Como podemos ver na imagem abaixo, a div amarela ficou no canto superior da div roxa. Então agora o próximo passo é centraliza-las.
Posicionando uma div na vertical

Centralizar uma div na vertical CSS3

Agora que a mágica acontece. Com uma propriedade do CSS3 essa tarefa ficou mais simples e assim podemos deixar as gambiarras de lado.  Então para centralizar a div amarela no centro da roxa, iremos utilizar a propriedade transform: translate. Mas antes disso precisamos dar as coordenadas usando as propriedades position, lef e top. Veja na imagem abaixo como deve ficar.

centralizando div com css3

E o resulto é esse.
centralizar uma div na vertical
Objetivo cumprido, centralizamos verticalmente sem fazer gambiarra, apenas usando uma propriedade nova do css3. Mas você pode estar pensando em como deixar essas duas box responsivas, certo? Respondendo sua pergunta, sim é possível, basta usar outra propriedade do css3, media queries, mas esse é assunto para outro tutorial onde abordaremos o Responsive Web Design.

 

Publicitário por formação e curioso nas áreas de designer gráfico e programação. Atualmente estudo marketing digital, PHP e JavaScript.