Home
All Posts
All Tags
CSS3 - Centralizando conteúdo verticalmente com flex-box

display:table-cell+vertical-align: middle

Se você nunca precisou alinhar um conteúdo ao centro no eixo vertical de um div, fique tranquilo, seu dia chegará e você lembrará desta dica, mas antes da solução, vamos entender o que acontece.

Muuuuuuuuuuuuito antigamente os sites eram todos diagramados utilizando as famosas tabelas e suas células, porém quando as pessoas entenderam que este não era o melhor modo para se diagramar um site e que principalmente existiam elementos específicos para este tipo de trabalho, o mundo da diagramação de sites foi revolucionado dando espaço ao o que conhecemos como tableless, neste novo modelo tabelas deveríam ser utilizadas apenas para exibição de dados tabulares. Incrível, não?

Com a chegada do tableless substituindo tudo o que era table, tr, th e td por div, span, ul, li, p, os problemas logo começaram a aparecer, um dos melhores exemplos é que naturalmente um div não fica alinhado ao lado do outro, o valor padrão da propriedade display de um div é block, o que faz com que todo div estique sua largura até 100% respeitando a largura do objeto relativo(do que ele está dentro). Mas este não foi o pior problema que apareceu, o maior vilão mesmo sempre foi o famoso vertical-align que funcionava perfeitamente quando aplicado em uma célula e agora não funcionava em um div.

Recentemente(já tem um certo tempo), ganhamos um grande aliado chamado flex-box, um novo valor que pode ser utilizado para configurar a propriedade display dos nossos maravilhosos divs. Quando display está definido com o valor flex em um div, ganhamos diversas outras propriedades que nos ajudam no controle do alinhamento dos elementos internos do div em questão.

É exatamente ai que nossos divs começam a ter o poder de alinhar objetos internos da mesma forma que a propriedade vertical-align alinhava os objetos internod de uma célula. Porém, muita calma nessa hora, não espere encontrar uma nova propriedade chamada vertical-align, pois esta propriedade ainda existe e ainda não funciona, você deverá utilizar as novas propriedades relacionadas ao display: flex chamadas align-items e justify-content, essas duas belezinhas vão resolver nossos problemas de alinhamento de forma bem simples, veja o exemplo abaixo:

<style>
  .div1 {
    height: 100px;
    width: 100px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .div2 {
    height: 30px;
    width: 30px;
    background-color: #87D37C;
  }
</style>
<div class="div1">
  <div class="div2">
    oi
  </div>
</div>

Veja abaixo como é exibido o exemplo descrito acima:

oi

Como podemos ver, o elemento div2 está centralizado verticalmente e horizontalmente através das propriedades align-items e justify-content, onde ambas foram configuradas com o valor center para o div1. Simples, né?

Esta foi só uma das dicas envolvendo flex-box, se você se interessou pelo assunto e quer mais informação a respeito, recomendo este excelente guia em inglês onde você encontrará em detalhes o funcionamento do flex-box para que você entenda tin-tin por tin-tin o que, como e onde as coisas acontecem.

Espero ter ajudado e que agora você consiga posicionar seus itens verticalmente centralizados sem gambiarras(transform: translate(-50%,-50%)).

Abraço!

Informação representada por números vs Tipos Numéricos

## É pa lê ou pa conta?Bom, hoje eu quero falar de um assunto que sempre aparece quando estamosfalando sobre modelagem de dados, seja ban...… Continue reading