Centralizando um objeto na Horizontal e Vertical com CSS

Objeto no centro da tela Uma das dúvidas mais freqüentes é esta: Como fazer para que um objeto fique no centro da tela usando css? A resposta está nos passos abaixo! Colocando a imagem: Neste exemplo vamos usar uma imagem, mas você pode perfeitamente usar um div, o processo é o mesmo. Coloque na imagem

Objeto no centro da tela

Uma das dúvidas mais freqüentes é esta: Como fazer para que um objeto fique no centro da tela usando css?

A resposta está nos passos abaixo!

Colocando a imagem:

Neste exemplo vamos usar uma imagem, mas você pode perfeitamente usar um div, o processo é o mesmo.

Coloque na imagem (ou no div) um nome de ID… Colocamos neste exemplo o ID com nome “centro”.

Definindo as dimensões do objeto:

Agora, no css, defina as dimensões do objeto (imagem ou div).

Nossa imagem tem 100 x 100 px’s, então vamos definir no css que a largura será de 100px (width:100px;) e que a altura também será de 100px (height:100px;).

Alinhando:

Estamos quase no final, você pode perceber que o objeto está um pouco desalinhado do centro. Vamos agora posicioná-lo… É aqui começa o truque.

Defina para nosso objeto, uma posição absoluta (position:absolute;), ele deverá ficar a 50% de distância do topo (top:50%;) e 50% de distância do lado esquerdo do documento (left:50%;).

O css não usa o centro do objeto como referência para o posicionamento, mas sim as extremidades, portanto, o que ficará no centro depois deste código, será o canto esquerdo superior do objeto.

O grande final:

Eis o truque para tirar a diferença, não é nada de outro mundo.

Você irá definir ao objeto duas margens negativas… a margem do topo (margin-top) e a margem da esquerda (margin-left). Na margem do topo, você simplesmente colocará um valor negativo, este valor será a metade da altura do objeto, neste caso, será -50px (margin-top:-50px;) e no lado esquerdo você fará a mesma coisa, mas o valor será a metade da largura do objeto, neste caso -50px (margin-left:-50px;).

Deixe um comentário

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