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!
Postado por tpastorello
[…] This post was mentioned on Twitter by Blackjack, Tiago Pastorello. Tiago Pastorello said: RT @vinteum Blackjack » Centro absoluto com CSS https://retwt.me/1PC9j […]
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!
aa propriedade margin: auto já nao resolve isso ?