Centralizar elementos na horizontal e vertical com CSS

Suponhamos que o elemento em questão, seja uma imagem de 100px de altura com 100px de largura.

Comece adicionando um id nessa imagem, seguindo o exemplo:

<img src="caminhodaimagem/nomedaimagem.extensao" id="center">

No CSS, seja ele um arquivo externo ou não, faça o seguinte:

#center {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

Agora, vamos ver o que fizemos no CSS:

  • Definimos o width e o height com a largura e altura da nossa imagem;
  • Definimos uma posição absoluta para a nossa imagem através do position: absolute;
  • Definimos o top e o left com 50% cada;

Já que o CSS usa as extremidades como referência para a posição, o que estará no centro da página será o canto esquerdo superior da imagem.

E agora vem a cereja do bolo:

  • Definimos 2 margens negativas, margin-top e margin-left com metade do valor total de largura e altura, ou seja, -50px para cada uma.

Valeu, até a próxima!

Avanti.