Centralizar elementos com flexbox (css3)

Heart Pure Css3 (Coração Css3)

Ola pessoal, depois post Centralizar elemento verticalmente usando CSS, resolvi fazer este post para mostrar como centralizar elementos em relação ao elemento pai de uma forma bem simples com uma das melhores novidades do css3 o flexbox.

Bom, para que você possa centralizar um elemento basta definir no elemento pai as seguintes propriedades: display: flex; para definir o layout como um flexbox, justify-content: center; para centralizar verticalmento os elementos filhos em relação ao seu pai e por último align-items: center; para alinhar o filho na horizontal, bem simples não é? Segue um exemplo que recriei do Afonso Pacifer.

Exemplo: Coração com animação feito somente com css3.

Heart Pure Css3!

Veja mais em Abimael Andrade.

Deixe aqui suas dicas e sugestões aqui! ↓


411 0 0