Esses dias atrás, recebi um vídeo claramente satírico em meu WhatsApp, nele havia um cara dizendo "Sou programador frontend e claramente sei centralizar uma <div />". Então, ele mostrava a tela dele, montou uma estrutura em HTML e foi tentar centralizar uma <div /> de maneira vertical e horizontal. Ele tentou de todas as maneiras, centralizou horizontalmente na primeira tentativa, mas na vertical ele não centralizou por mais que ele tentasse.

Na hora, esse vídeo me soou muito engraçado, pois, como todo programador especializado em frontend, eu sei maneiras de colocar a <div/> em qualquer lugar da tela. Mas me questionei se era uma dúvida real. Lancei em um grupo que eu tenho no WhatsApp de amigos que começaram a estudar programação há algum tempo e perguntei qual havia sido o erro do cara no vídeo ao centralizar a <div />. Na hora, muitos também não conseguiram responder algo efetivo para resolver essa atividade de CSS.

Pensando nisso, decidi trazer esse artigo, um "truque" de CSS que poderá facilitar muito a sua vida na hora de estilizar os seus projetos com CSS. Então, mesmo que você não tenha tido experiência com programação antes, abra este link e tente fazer junto comigo o que vou te mostrar ao longo deste artigo.

Antes de tudo. 

Entendendo que muitos que estão lendo nunca tiveram experiência prévia com programação WEB, preciso explicar que, para exibir uma página em um navegador de internet, o navegador solicita para um servidor a página que ele precisa exibir. Como resposta, o servidor devolve alguns arquivos para montar a página, sendo eles: .html, .css, .js, arquivos de imagens e de fontes.

Os arquivos HTML contêm a estrutura da página. É neste arquivo que é montada toda a estrutura que vai ser apresentada. Ele possui uma sintaxe própria definida por meio de <tags>. Todas as <tags> têm seus respectivos fechamentos </tags>.

 As <tags> podem aparecer dentro de outras <tags>, sendo as tags de fora chamadas de pais, e as tags interiores chamadas de filhas. Há várias <tags> que representam estruturas e podem ser utilizadas como pais, como: <div>, <header>, <footer>. . . Eu digo isso, pois elas não exibem de fato um elemento na tela por ela mesma, como as diversas outras <tags>, como: <p>, <a>, <img>, etc.

Por outro lado, todas as <tags> podem ser utilizadas como filhas. No exemplo abaixo, você verá a mesma tela que viu quando entrou no link acima. Este é o CodePen, ele é muito útil para testar nossas ideias em HTML, CSS e JS. Nesse primeiro momento, apenas fiz a estrutura HTML que utilizaremos neste artigo. Note que eu defino por meio de "class" quais são os <div> pais e filhas. Este atributo é utilizado para indicar para a <tag> a qual classe ela pertence, e pode ser utilizado para manipular esta <tag> com CSS e JS.

Note que não apresentou nenhum retorno. Isto ocorre justamente porque, como falei anteriormente, justamente porque a <div> é uma tag de estrutura e serve para definir seus blocos de <tags>. Este meu exemplo é meramente ilustrativo, e está longe de um caso real. Porém, o conceito que você aprenderá em CSS, você conseguirá colocar suas <tags> onde vocês quiserem.

Os Princípios de CSS.

Agora que você já sabe um pouco sobre a estrutura HTML da página, vou te mostrar como você faz para personalizar a exibição da página da maneira que você quiser. Quando falamos nesse tipo de personalização, chamamos de estilização, e ela acontece por meio de folhas de estilo em cascata, ou (Cascading Style Sheets): CSS.

A sintaxe do CSS é bem simples, apenas temos que entender a sua estrutura básica. Ela funciona por meio de blocos de estilo, onde são definidas as propriedades e atributos de um seletor. O seletor é um elemento HTML que pode ser definido por meio de classes (representado por '.' + nome_da_classe), tags (representado por nome_da_tag) e IDs (representado por '#' + nome_do_id). 

Vamos analisar o CSS que utilizei por partes. Primeiro defino um seletor global "*" que configuro algumas propriedades. O seletor global indica que todos os elementos no CSS, independente da sua classe, id ou tag. A propriedade 'padding' define o tamanho de margem interna do meu elemento, note que eu defino como '0', pois eu garanto que a partir daqui, todos os elementos terão este valor como '0' podendo ser alterado nos códigos abaixo. Note que eu faço o mesmo com a propriedade 'margin', que define o tamanho da margem externa dos seus elementos. Por fim, altero a propriedade 'box-sizing' para 'border-box', isto garantirá que, no tamanho total do elemento, seja contabilizado o tamanho definido no 'padding'. Isto é uma boa prática e pode ser utilizado em todos os projetos.

Logo em seguida, defino as propriedades da classe "pai". Aqui eu defini a cor de fundo dela utilizando a propriedade 'background-color', passando o código hexadecimal do azul que vocês estão vendo. Eu também defini a propriedade 'width' para '100vw' e 'width' para '100vh'. O uso de 'vw' como medida indica para o CSS que eu quero o valor com base na porcentagem da largura da janela, como defini em 100, assume a largura inteira da janela. Isto também acontece com 'vh' que define a altura da janela. Logo, a classe pai possui o tamanho da janela inteira e tem uma cor azul de fundo. Agora vamos definir os atributos da tag 'filha'.

Note que utilizei as mesmas propriedades que utilizei na classe 'pai', porém com atributos diferentes. Sendo assim, ficou um quadrado vermelho com 100px de largura e altura. Vale também prestar atenção que ele ficou no canto superior esquerdo da tela. Isso ocorre, pois é o comportamento de exibição padrão para o elemento <div>.

Agora que construímos nosso ambiente, vou pedir para você tentar centralizar esse quadrado vermelho no meio do azul. Faça isso um pouco e continue a leitura deste artigo.

Como centralizar uma div?

Quando eu vi no vídeo que mencionei anteriormente, o rapaz tentou fazer isso alterando o próprio seletor da <div> que ele queria centralizar. Imagino que muitos pensem que este será o caminho mais lógico, afinal, o objetivo é centralizar este elemento, mas eu já te garanto: não é o mais simples.

Agora vou te apresentar o que realmente faz a mágica acontecer: o Flex Box. Ele é um modelo de layout criado para auxiliar na organização e alinhamento de elementos em CSS. Ele utiliza o conceito de containers e itens. E lembra que expliquei sobre elementos pais e filhos? É exatamente isto! O 'container' é aquele que engloba os outros elementos, sendo 'item' o elemento interno. Para definir que o elemento é um container Flex Box, definimos a propriedade 'display' para 'flex'. Quando fazemos isso, podemos utilizar as propriedades 'align-items' e 'justify-content' para definirmos o alinhamento dos itens interiores. E é assim que eu centralizo uma <div>.

Conceitos de Flex Box.

Vimos que quando utilizamos as propriedades do Flex Box, a <div> interior ficou centralizada, conforme estávamos esperando. A propriedade 'align-items' foi responsável pelo alinhamento vertical e 'justify-content' pelo horizontal. Nelas, eu utilizei o atributo 'center' para realizar a atividade, mas eu poderia definir outros valores.

Na propriedade 'justify-content' eu posso definir que o alinhamento horizontal dos itens interiores seja à esquerda com 'flex-start', à direita com 'flex-end', centralizado com 'center'. Pode também definir o alinhamento dos itens internos como: com os itens espaçados igualmente, considerando o tamanho total utilizando 'space-between'; com os itens espaçados igualmente junto à margem do item com 'space-evenly'; e com os itens espaçados, porém com as margens horizontais com metade do tamanho da margem dos itens internos utilizando 'space-around'.

Já na propriedade 'align-items', podemos definir que os elementos internos estejam alinhados verticalmente ao topo do elemento com 'flex-start', no centro com 'center', no fim com 'flex-end' e por fim, 'streech' que faz com que os itens internos tenham o tamanho máximo do elemento container.

Vale mencionar também, como mostrado na imagem, que quando se utiliza Flex Box em um container com vários itens internos, ele assume os itens internos como colunas. Para que os itens internos sejam exibidos como linhas (maneira de exibição padrão do HTML), definimos a propriedade 'flex-direction' como 'column'. Mas atenção, isso faz inverter a direção das propriedades 'align-items' e 'justify-content'.

O valor padrão desta propriedade é "row", e caso você queira trocar a ordem dos itens internos, você pode utilizar 'column-reverse' e 'row-reverse'.

Por fim, vale mencionar que, caso você tenha mais elementos do que a tela consiga exibir, pode se utilizar a propriedade 'flex-wrap' como 'wrap' para permitir a quebra de linhas.

Conclusão

Há um universo de possibilidades incríveis que podemos fazer estilizando nossas páginas em HTML utilizando o CSS. Caso você queira explorar mais sobre as propriedades CSS, você pode clicar neste link, que você será direcionado para a página de documentação oferecida pela Mozilla. Lá você encontrará a documentação completa e atualizada do CSS.

Lembre-se de que você pode entrar em contato comigo a qualquer momento preenchendo o formulário abaixo. Eu estou disposto a te ajudar a alavancar o seu projeto corporativo e pessoal.

Caso você queira ler mais artigos como este, abaixo tem alguns dos artigos que escrevi recentemente. Te encontro lé!