Centro absoluto com CSS

Uma das formas mais comuns de exibir layouts HTML é centralizar o conteúdo. Um recurso eficiênte é utilizar regras CSS para fazer o trabalho.

O modelo apresentado cria uma classe para fazer divisões horizontais e dentro dessas divisões alinhar o conteúdo.

Comentários no código.

/*
A classe 'estrutura' serve somente como estrutura para o conteúdo que será centralizado.
Utilizamos width em 100% para aproveitar a largura total do navegador.
*/
.estrutura {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #CCC;
    float: left;
}
/*
A classe 'conteudo' é responsável por centralizar
o conteúdo HTML.
*/
.conteudo {
/* largura do o layout */
    width: 1000px;
/* posição relativa */
    position: relative;
/* posicionada a 50% de distância da margem esquerda */
/* para alinhar a div exatamente no centro. */
    left: 50%;
/* 'margin: 0 0 0 -500px;' alinha -500px para a esquerda, orientando a div pelo centro absoluto. O valor deverá ser negativo e igual a metade do valor informado anteriormente em 'width'. */
    margin: 0 0 0 -500px;
    padding: 0;
/* para garantir o funcionamento no IE */
    display: inline;
    background-color: #FFF;
    float: left;
}

Assim teremos o HTML:


<html>
....
  <body>

      <div class="estrutura">
          <div class="conteudo">
              <h1> Conteúdo Centralizado </h1>
          </div>
      </div>

  </body>
</html>

Para ver um exemplo clique aqui.

Gostou? Compartilhe!

Compartilhe:

Postado por tpastorello

Leia Mais:

3 respostas para “Centro absoluto com CSS”

  1. […] This post was mentioned on Twitter by Blackjack, Tiago Pastorello. Tiago Pastorello said: RT @vinteum Blackjack » Centro absoluto com CSS http://retwt.me/1PC9j […]

  2. Digicold disse:

    Meu querido @tpastorello, esse post foi a luz do meu caminho hoje e garanto que vai ser de muita gente, tava procurando uma solução que deixasse as colunas laterais da página fluidas (nem precisei criá-las heheh) e o centro com tamanho fixo e vc ajudou muito com a dica acima… tá de parabéns! sucesso com o blog!

  3. Erick disse:

    aa propriedade margin: auto já nao resolve isso ?

Deixe uma resposta

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