Como criar uma caixa DIV centralizada ao meio

Olá Prezados leitores do Blog Dicas do Artony!

Para os iniciantes, as propriedades CSS exigem muita paciência, perseverança e prática para alcançar o resultado desejado! Durante muito tempo, sempre quis descobrir como criar uma caixa (Box) DIV CSS, com alinhamento centralizado e ao meio. Para facilitar o entendimento, vou mostrar uma imagem com três elementos alinhados:

1. centro e topo = center top
2. centro e meio = center middle
3. centro e inferior = center bottom

Os atributos base da categoria "text-align" são: "left" (Esquerda), "center" (Centro) e "right" (Direita).
Os atributos base da categoria "vertical-align" são: "top" (Topo), "middle", (Meio) e "bottom" (Inferior).


Para aplicar o alinhamento centralizado (Center) é simples, basta aplicar o atributo: "text-align: center" à caixa DIV, outra forma de alinhar ao centro, é criar a caixa DIV dentro da poderosa tag: "<center></center>", nesse segundo caso, até a DIV, será alinhada ao centro da página. Até agora simples e perfeito!

Texto centralizado pelo atributo: "text-align: center"

Texto centralizado pela tag: "<center></center>"

O problema começa quando tentamos aplicar a propriedade: "vertical-align: middle", que em teoria seria responsável por "levar" um texto, uma imagem ou ambos até o meio da caixa DIV, não funciona. O atributo "text-align: center" funciona corretamente, porém, o "vertical-align: middle" não coopera. Veja abaixo, o código usado na DIV que falhou em "levar" a imagem e o texto para o meio da caixa.

DIV com alinhamento centralizado e ao meio (Falha!)

<div style="background: #EEEEEE; border: solid 1px #CCCCCC; height: 175px; text-align: center; vertical-align: middle; width: 175px;">
<img src="http://i.imgur.com/Up6azM7.png" />
Imagem e texto alinhado pelo atributo: "<span style="color: blue;">vertical-align: middle</span>" (<span style="color: red;">Falha</span>)
</div>

Imagem e texto alinhados pelo atributo: "vertical-align: middle" (Falha!)

A explicação que encontrei para essa falha do atributo "vertical-align", foi no blog maujor, uma sumidade em CSS e HTML. É que segundo a W3C, tal atributo destina-se a alinhar textos verticalmente que estejam dentro de uma linha ou em uma célula de tabela. Agora, sabendo desse detalhe, curioso que sou, fui testar o atributo "vertical-align" em uma tabela e sem nenhuma surpresa, realmente funciona! Veja abaixo o código utilizado.

Tabela com alinhamento text-align: center e vertical-align: middle. (Sucesso!)

<center>
<table style="border: ridge 5px #87CEFA; width: 180px; height: 180px;"><tbody>
<tr><td style="text-align: center; vertical-align: middle;"><img src="http://i.imgur.com/0F45VCj.png" />
Imagem e texto alinhados ao centro e ao meio em uma tabela. (<span style="color: green;">Sucesso!</span>)</td></tr>
</tbody></table>
</center>

Imagem e texto alinhados ao centro e ao meio em uma tabela. (Sucesso!)

E agora, nossa tentativa em relação a DIV definitivamente falhou? Não! Segundo o "Dinossauro" das CSS, Maurício Samy Silva, para alcançarmos o resultado de alinhamento centralizado e ao meio em uma DIV, basta apenas aplicarmos à caixa DIV o atributo: "display: table-cell" (Que até então, eu sequer conhecia). Isso fará a DIV ter um comportamento de célula de tabela. Realmente só um mestre para desvendar coisas tão complexas para leigos de uma forma tão simples e direta! Veja abaixo, os códigos utilizados nas DIVs, aplicando as propriedades "text-align: center", "vertical-align: middle" e "display: tabel-cell" e em seguida os resultados.

Texto em uma DIV com as propriedades: "text-align: center", "vertical-align: middle" e "display: table-cell". (Sucesso!)

<div style="background: #EEEEEE; border: solid 1px #CCCCCC; display: table-cell; height: 175px; text-align: center; vertical-align: middle; width: 175px;">
Texto centralizado ao meio pelos atributos: "text-align: center", "vertical-align: middle" e "display: table-cell".
</div>

Imagem em uma DIV com as propriedades: "text-align: center", "vertical-align: middle" e "display: table-cell". (Sucesso!)

<div style="background: #EEEEEE; border: solid 1px #CCCCCC; display: table-cell; height: 175px; text-align: center; vertical-align: middle; width: 175px;">
<img src="http://i.imgur.com/0F45VCj.png" />
</div>

Imagem e texto em uma DIV com as propriedades: "text-align: center", "vertical-align: middle" e "display: table-cell". (Sucesso!)

<div style="background: #EEEEEE; border: solid 1px #CCCCCC; display: table-cell; height: 175px; text-align: center; vertical-align: middle; width: 175px;">
<img src="http://i.imgur.com/0F45VCj.png" />
Imagem e texto centralizados ao meio pelos atributos: "text-align: center", "vertical-align: middle" e "display: table-cell".
</div>

Texto centralizado ao meio pelos atributos: "text-align: center", "vertical-align: middle" e "display: table-cell"

Imagem e texto centralizados ao meio pelos atributos: "text-align: center", "vertical-align: middle" e "display: table-cell"

Para finalizar essa postagem, repito o que disse no início: CSS exige muita paciência, perseverança e prática. Mas, sem sombra de dúvida, é um mundo fascinante!

Espero que tenham gostado dessa dica! Gostou? Compartilhe! Um abraço e até a próxima!

Para receber postagens no seu E-mail, assine nossa Newsletter! → Clique e assine agora!

Informar link quebrado eu erro nesta postagem! → dicasdoartony@gmail.com