Publicado por: Paulo Fernandes | 28/jun/2008

Centralizar Layout na Horizontal e na Vertical

Olá a Todos.

Bom galera neste artigo ensinarei a centralizar um layout na vertical e na horizontal independente da resolução, para isso precisamos saber exatamente duas coisas.

  1. Tamanho do layout na Vertical [ height ];
  2. Tamanho do layout na Horizontal [ width ];

Explicarei o conceito depois coloco o código e se achar necessário coloco mais algum comentário no final do artigo. Bem vamos aos conceitos.

Para alinhar na horizontal já expliquei, veja este artigo Centralizando na Horizontal, mas para este alinhamento aqui muda um pouco o conceito. Nossa como eu enrolei, colocarei os passos para eu não me perder!

  1. Definir uma largura e uma altura [ width / height ];
  2. Posicionar o elemento absolutamente [ position ];
  3. Definir onde o elemento deve ficar em relação ao topo e a esquerda [ top / left ];
  4. Definir as margens do topo e da esquerda [ margin-top / margin-left ];

Bom agora que definimos o que fazer, vamos ao código xHTML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Centralizando Layout na Vertical e na Horizontal by aprendacss.wordpress.com</title>
<style type=”text/css”>

#tudo {
width: 500px;
height: 500px;
background-color: #00F;
}

</style>
</head>
<body>
<div id=”tudo”>

</div>
</body>
</html>

Layout no Canto Esquerdo

Pronto desta forma já criei a div#tudo porém ela está posicionada na esquerda, agora vamos incrementar o código aos poucos, para ver o que acontece! Primeiro incremento, posicionar absolutamente, nada acontecerá, então vamos colocar mais alguns elementos, e seguindo nossa orderm agora vem os posicionamentos referente a topo (top) e esquerda (left).

#tudo {
width: 500px;
height: 500px;
position: absolute;
top:50%;
left:50%;
background-color: #00F;
}

Layout Com Top e Left Definidos

Nossa o que aconteceu aqui!? :/

Calma vamos entender. position: absolute; “coloca” o elemento onde mandarmos e para onde nós mandamos ele? Cuidado com a resposta. 😉 Bem nós mandamos ele ficar à 50% do topo e à 50% da esquerda, e é exatamente a onde ele está tente redimensionar a janela e verá para onde ele irá. [ ele não pode mudar muita coisa não, tem que ficar a 50% do topo e da esquerda de acordo com o tamanho da janela que você deixou ]

Bom agora que ele está a 50% do topo e da esquerda, vamos alinhá-lo utilizando as margens.

#tudo {
width: 500px;
height: 500px;
position: absolute;
top:50%;
left:50%;
margin-top: -250px;
margin-left: -250px;
background-color: #00F;
}

Layout Centralizado na Vertical e na Horizontal

Nossa ele ficou bem no meio, que legal! Vamos entender o porque de definir margem negativa!

Quando definimos uma margem queremos que ela exatamente tenha um espaço de um lugar, se definirmos um valor negativo, ela fará justamente o contrário, ela se aproximará mais do local.

Ok! Entendi, mas porque -250px? Bem se você está se perguntando isso, responderei para você, mas farei você pensar junto comigo. Está disposto a isso? Então vamos lá!

Defini o tamanho do meu layout sendo um quadrado de 500px de largura por 500px de altura, isso é óbvio pois é um quadrado e quadrado tem que ter os lados iguais, mas vamos continuar com o artigo, após isso defini que ele deveria ficar há 50% do topo e 50% da esquerda, mesmo que você não tenha prestado muita atenção, deve ter notado que o tamanho do quadrado está em pixel e o posicionamento em porcentagem. Bom já que a margem negativa aproxima ao invés de afastar se eu defini-la com pixels, eu estou aproximando ela do topo e da esquerda, por isso que ela fica bem no meio.

Ah! Agora eu entendi! Pelo menos eu acho!? Como eu faria se fosse um layout com 700px de largura por 400px de altura ?

Simples, essa margin-left deve ser o valor do width: dividido por 2, e a margin-top deve ser o valor do height dividido por 2. LEMBRANDO QUE SEMPRE NEGATIVOS.

Para ver o resultado acima, altera o código da div#tudo para esse:

#tudo {
width: 700px;
height: 400px;
position: absolute;
top:50%;
left:50%;
margin-top: -200px;
margin-left: -350px;
background-color: #F00;
}

Layout Centralizado na Vertical com Novo Tamanho

Bom é isso ai pessoal!

Se ainda tiverem dúvidas, não se acanhem, podem postar a vontade.

Até o próximo.

Anúncios

Responses

  1. Mandou bem kra… parabéns

  2. Muito obrigado.
    Espero poder postar sempre.
    Valeu

  3. Paulo,

    Eu construir meu layout para uma resolução de 1024X768 com lefts e tops definidos na modo absolute. Agora!Quando eu abro meu site numa resolução maior que 1024 ele não fica centralizado, e sim todo a esquerda.
    Tentei coloca-lo dentro de uma tabela e centraliza-lo ou dentro de uma div da forma que vc mostrou neste artigo, mas o layout não se mexe. Acredito que seja pelo fato de ter lefts definidos. Vc pode me ajudar com essa? Obrigado.

  4. @Marcelo Braga
    Posso tentar te ajudar, mas você precisa me enviar o código. Posso te dizer que o problema pode ser outra regra CSS que está sendo sobreescrita. Reveja o seu CSS e qualquer coisa, acesse o http://forum.imasters.com.br e poste sua dúvida lá concerteza o pessoal te ajudará!

    abraço

  5. Boa Tarde.
    Costumo centralizar meus sites da seguinte forma:
    defino no body um “text-align: center” para centralizar tudo que tem dentro dele, e a div #tudo (que contem o site inteiro dentro) coloco um “margin: 0 auto” definindo assim que a div #tudo fica com margin zero para o topo o chão e margem automatica nas duas laterais.
    Para evitar que o restante dos elementos do site assumam o text-align: center, aí uso dentro da dv #tudo um text-align: left, que faz tudo voltar ao padrão, alinhando a esquerda.

    Abração!

  6. Caro Ewaldo

    Dessa forma você centraliza na horizontal, mas não na vertical, tenho este post aqui do layout na horizontal que faz exatamente como você disse

    link: https://aprendacss.wordpress.com/2008/06/25/centralizando-layout-na-horizontal/

    abraço

  7. O mundo precisa de pessoas assim, dispostas a ajudar o próximo, sem pensar a quem, PARABÉNS ótimo tópico, continue assim.

  8. Sei que o post é velho, mas só li agora.
    A técnica eu conhecia, mas foi excelente explicação da técnica. Fora o estilo informal de escrever, risos. Ficou excelente mesmo.

  9. muito bom me ajudou muito.Mas me responda eu tentei comocar “margin: 0 auto” e não ficou no meio,você pode re responder por que???


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: