CSS: Alinhar verticalmente não é um bicho de sete cabeças!

01

Algumas pessoas sempre me perguntam como alinhar um elemento verticalmente ao centro da tela com CSS. O que parece ser um bicho de sete cabeças, na verdade é algo simples de ser feito e compatível com todos os browsers:

A única regra neste método é que você precisa declarar a altura (height) e que o elemento tenha o posicionamento absoluto.

Vantagens:

  • Compatível com todos os principais browsers, inclusive IE 8-10.
  • Responsivo. Funciona em qualquer resolução, funcionando com porcentagens e “min/max”.
  • Centraliza, mesmo que tenha margem (padding).
  • Funciona perfeitamente para imagens.
  • Perfeito para criar “modals” com conteúdo (alertas flutuantes no centro da tela).

Desvantagens:

  • Não funciona no Windows Phone.

Leave a Reply

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