CSS – Centralizando conteúdo verticalmente

0
2 Flares 2 Flares ×

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:

1..centralizado {
2.width600px;
3.height300px;
4.positionabsolute;
5.top50%;
6.margin-150px 0 0 0;
7.}

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:

1..centralizado {
2.width600px;
3.height300px;
4.positionabsolute;
5.top50%;
6.left50%;
7.margin-150px 0 0 -300px;
8.}

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.

 

2 Flares Twitter 0 Facebook 0 Google+ 2 2 Flares ×

Deixe seu comentário sobre esté Post do Blog

Comente a Publicação