Centralizar imagem na horizontal e vertical com CSS

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"><br />.box {<br />    display: table-cell;<br />    text-align: center;<br />    vertical-align: middle;<br />    width: ...;<br />    height: ...;<br />}<br />.box * {<br />    vertical-align: middle;<br />}<br /></style><br /><br /><!--[if lt IE 8]><br /><style type="text/css"><br />.box span {<br />    display: inline-block;<br />    height: 100%;<br />}<br /></style><br /><![endif]-->

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

<a href="http://www.cssnolanche.com.br/centralizar-imagem-na-horizontal-e-vertical-com-css/#viewSource" target="_blank" rel="noopener noreferrer"></a><div class="box"><br /><span></span><br /><img src="" alt="" title="" /><br /></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