Como centralizar uma DIV, Imagem ou Texto em HTML e CSS

Veja este breve tutorial de como colocar uma DIV centralizada usando pouquíssimo código em CSS. Também como centralizar tags de textos e por fim como colocar uma imagem no centro.

Índice deste artigo

Formatação
Como Centralizar uma imagem?
Por que é necessário centralizar uma imagem?
Mas é se eu setar a largura com 100%, isto não resolveria?

Uma necessidade de quem desenvolve sites é de centralizar uma div. Há pelo menos duas razões para isso: A primeira é que qualquer site deve ser feito usando a tag DIV como case do site a fim de que se possa trabalhar melhor o alinhamento do mesmo, seja centralizado ou alinhado a esquerda ou direita. A segunda razão é que em funções dos mais diferentes tamanhos e resoluções de tela é quase unânime a ideia de que um site deve ser centralizado a fim de administrar melhor os espaços laterais que excedem a largura do site.

Neste artigo mostrarei também como centralizar outras tags de texto e uma imagem com CSS. Para isso, a primeira coisa a fazer é criar o HTML adequadamente a fim de facilitar a formatação no CSS. Veja o código abaixo:

Como centralizar uma div, imagem ou texto em HTML e CSS

Perceba que coloquei o id=”site” na div que quero centralizar. Isto é necessário, pois caso eu vier a ter outras tags divs neste HTML, apenas esta tag deve ser centralizada. Perceba ainda os textos posicionados nas tags <h1> e <p>. Por fim a imagem com a tag <img>.

Formatação

Agora vamos ao CSS. Veja o código em CSS para centralizar a div e as tags de texto:

Como centralizar uma div, imagem ou texto em HTML e CSS

O resultado pode ser visto aqui.

Explicando:

Linha 2: Crio a regra para formatar a div cujo id é site
Linha 3: Largura da div setado em 800px
Linha 4: Margem superior e inferior 0px, direita e esquerda “auto”. Aqui está o segredo, pois ao determinar que as margens direita e esquerda serão automáticas, eu transfiro para o navegador definir quais serão os valores de cada um. Em um monitor de 1000px, por exemplo, ele fará o seguinte cálculo: 1000-800=200, ou seja, sobrou 200px, desta forma ele pega a sobra e coloca 50% de cada lado.
Linha 5: Cor de fundo da div.
Linha 7: Crio a regra para formatar o h1 e o p
Linha 8: centralizo o conteúdo das duas tags.

Conforme indicado na imagem, a regra da linha 14 não funcionará, pois a tag img não pode ser centralizada, pois a mesma é uma tag inline. Há dois tipos de tags em HTML: De bloco e inline.

As tags de bloco são aquelas que ocupam o espaço de uma linha interira. A maioria das tags HTML são de bloco. Já as tags inline são aquelas que podem ser usadas dentro dos blocos, como as tags: <a> para link, <strong> para negrito, <em> para enfatizado, <img> para imagens, entre outras.

Como Centralizar uma imagem?

A solução para centralizar a imagem é colocá-la no HTML dentro de uma tag de bloco e centralizar no CSS o conteúdo desta tag. Como já temos as tags <h1> e <p> com essa característica, basta colocar a imagem dentro da tag <p>, como no exemplo abaixo:

Como Centralizar uma imagem.

O resultado pode ser visto aqui.

Por que é necessário centralizar uma imagem?

A história antiga, mas vale a pena ser contada.

Lá atrás quando os monitores eram pequenos, os sites eram construídos de maneira a preencher toda a tela e como havia uma pequena variação de tamanho de monitores, isto não chegava a ser um problema.

Na medida em que os monitores foram crescendo de tamanho, cresceu também as dificuldades para lidar com o tamanho dos sites, em especial a sua largura. Assim, se você produzia um site para o monitor de largura de 800 pixels, mas agora começam a surgir monitores de 1024 pixels, o site ficava alinhado à esquerda e com isso muito espaço em branco ficava à direita na tela.

Para resolver esse problema, ou pelo menos para tentar minimizá-lo, alguém começou a centralizar o site na tela e assim se alguém tivesse um monitor de 800 pixels iria preencheria toda a tela, mas se o monitor fosse maior ele ficaria centralizado e assim não ficaria tão estranho o layout do site.

Como o tamanho dos monitores não parou de crescer, esta solução acabou sendo consolidada e hoje é usada praticamente na grande maioria dos sites.

Mas é se eu setar a largura com 100%, isto não resolveria?

Resolve em partes. Se setar a largura de uma div com 100%, ela var esticar de acordo com a largura do monitor e preencher toda a tela, mas isto servirá apenas se o conteúdo dela for fluído, como é o caso de texto. Mas se for uma imagem, a situação fica complicada, pois você não pode esticar uma imagem.

É verdade que hoje temos sim condições de lidar com isso de maneira mais eficiente, com a melhoria do CSS, integração com recursos de javascript e a própria estrutura do HTML que na versão 5 trouxe algumas melhorias.

Mas a essência do problema ainda permanece, em especial com a entrada dos dispositivos móveis. Para entender melhor sobre isso, sugiro que estude sobre layouts responsivos e layouts fluídos.