Imagine a seguinte situação: você precisa centralizar uma
imagem dentro de um box maior que a imagem e com dimensões atribuídas. Caso você insira a imagem via CSS, é fácil deixá-la centralizada, mas
isso não é possível quando estamos utilizando a tag <img>.

Você poderia simplesmente fazer o seguinte:

• Aplicar display:block  à imagem
• Definir as margens esquerda e do topo para a imagem, deixando-a
  centralizada dentro do box.

Mas o grande problema é que você pode ter imagens no formato retrato e
paisagem. Imagine uma galeria de fotos com fotos de diferentes
tamanhos, você teria que definir um CSS para cada imagem para que elas
ficassem centralizadas.

A solução

Centralizar imagens na horizontal não é difícil, se a imagem está com
seu comportamento padrão de display:inline, então um simples
text-align:center já resolveria o problema e funcionaria bem em todos os
browsers.

Agora para centralizar imagens na vertical, em browsers modernos, uma
simples solução é atribuir display: table-cell; e vertical-align:
middle ao elemento container. Só que como nessa vida nem tudo são
flores, em browsers como o IE7 e inferiores essa técnica não funciona.

Para o IE7, a solução é criar uma espécie de linha, tendo como altura
a altura do container e utilizar novamente vertical-align: middle. A
propriedade line-height infelizmente não pode ser usada para conseguir
esse efeito, uma vez que ela não funciona corretamente no IE7/Win na
presença de imagens. Utilizar também uma fonte com algum tamanho grande
(sem especificar line-height) é problemático, porque o tamanho da caixa
gerada é ligeiramente maior que o tamanho da fonte.

Felizmente o IE7 tem suporte parcial a propriedade display:
inline-block. Se um elemento vazio que possua a propriedade inline-block
(por exemplo um <span>) é adicionado dentro do elemento container e
é atribuído ao mesmo height:100% e vertical-align: middle, então ela
permite justamente conseguir o que queremos.

A solução utiliza das propriedades display: table-cell e uma tag
<span> extra com display: inline-block. Funciona em todos os
browsers, inclusive no Internet Explorer.

Código CSS

No exemplo foi utilizado um elemento container com a classe box e o
código para o IE será descrito aqui através de comentarios
condicionais:

<style type="text/css">
.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.box * {
    vertical-align: middle;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.box span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->

A marcação HTML é muito simples e é descrita logo abaixo:

<div class="box">
<span></span>
<img src="" alt="" title="" />
</div>

Vejam o exemplo em funciomanento. Essa técnica foi
originalmente desenvolvida pelo desenvolvedor Bruno, veja mais
informações no post original.

*

Saiba mais sobre CSS no iMasters Shop