Menu

Home » Blog » Centralizar div com medidas em porcentagem

Centralizar div com medidas em porcentagem

tutoriais webdesign • 18-01-2014

Olá pessoal. Estou postando sobre uma dúvida que muita gente tem até hoje e confesso que até pouco tempo atrás eu também tinha. Como centralizo uma div na horizontal com um conteúdo dinâmico?

É bastante comum encontrarmos o tutorial de como centralizar a div na horizontal dando valores fixos na sua altura e largura. Abaixo segue um exemplo de com valores fixos. Clique nas abas html e css para ver o código.

No código acima, o que centraliza a div são as propriedades position, top e left. Contudo, para ficar realmente no centro, você deve colocar o valor das margens (margin) top e left negativas com a metade da sua altura e largura.

Agora você pergunta: Por que o margin-top é -35px e o margin-left é -270px se minha altura (height) é 50px e a largura(width) é 500px? A resposta é simples. Como demos um valor de 20px para todos os lados no padding, automaticamente é acrescentada 40px na altura e na largura.

Bom, agora vamos ao que realmente interessa. Vamos centralizar a div com conteúdo dinâmico. Nós precisamos mudar um pouco nosso código html e css. Veja abaixo o resultado.

Acrescentamos mais duas divs no html: a div tabela e a div campo. A div conteúdo continuou sem modificações. Neste exemplo nós tratamos as divs como se fossem tabelas. A div tabela é a tabela principal onde a div campo é uma célula da tabela e a div conteudo é o conteúdo da célula.

Os segredos estão em colocar display: table na div tabela, vertical-align: middle e display: table-cell na div campo e margin:auto na div conteudo.

Bom pessoal, espero que tenham gostado. Até a próxima.



comments powered by Disqus

» Categorias