Como centralizar verticalmente usando CSS com Flexbox

Aprenda de um jeito rápido e fácil como centralizar verticalmente usando CSS com Flexbox. Este vídeo é muito útil caso o elemento que deseja centralizar não possua um tamanho definido.

No vídeo você vai perceber que usando apenas 3 linhas códigos CSS conseguirá resolver o problema do alinhamento vertical dos elementos em seu site. Assista:

Código CSS

Copie o código abaixo para utilizar no elemento pai.

 <span class="token selector"><span class="token class">.elemento-pai </span></span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> 

Utilize os comentários para tirar suas dúvidas. Se preferir também podemos conversar no Twitter.


Você acha trabalhoso personalizar o Bootstrap? Então assista este vídeo e aprenda a baixar temas grátis para o CSS do Bootstrap.


Publicado em 29 de junho de 2017


Dúvidas? Deixe seu comentário.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*
*