Como centralizar conteúdo verticalmente na página? Essa é uma dúvida comum e várias pessoas já me perguntaram se há alguma forma simples de se fazer.
Geralmente o que se quer é centralizar uma div ou imagem e é bastante comum ver esse tipo de layout em páginas de aviso, disclaimer e em páginas de sites “em construção”. Segue então uma solução que costumo usar:
.centralizado {
width: 600px;
height: 300px;
position: absolute;
top: 50%;
margin: -150px 0 0 0;
}
Entenda o que fizemos em cada uma das linhas:
width: 600px : configuramos a largura do elemento que queremos centralizar;
height: 600px : configuramos a altura do elemento que queremos centralizar;
position: absolute : deixamos o elemento posicionado absolutamente na página;
top: 50%; : posicionamos o topo do elemento no meio da página, verticalmente;
margin: -150px 0 0 0; : para compensar, colocamos uma margem superior com a metade da altura;
Pronto, basta adicionar a classe “centralizado” ao seu elemento e ele ficará posicionado no centro vertical da sua página.
E claro, você pode usar o mesmo princípio se quiser centralizar também na horizontal, basta fazer duas pequenas alterações no código, colocando a propriedade left e alterar a margem esquerda. Veja:
.centralizado {
width: 600px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -300px;
}
O que alteramos do código anterior:
left: 50% : posicionamos a borda esquerda do elemento no meio da página, horizontalmente;
margin: -150px 0 0 -300px : para compensar, colocamos uma margem esquerda com a metade da largura;
É isso aí, agora o elemento ficará posicionado bem no centro da página, horizontalmente e verticalmente. Veja aqui o exemplo publicado.
2 Comentários
ae dom,
parabéns pelo post…..sempre postando informações úteis!!
[]’s
Aew Dom!
Não tem muita diferença entre centralizar horizontalmente e verticalmente não.. a lógica é a mesma! Só as pessoas que não conseguem pensar!
Parabéns!
Vlw
Matheus Matos