Centralizar imagem

[Nolram 0]

Estou montando um site em que as imagens terão animações e movimento, preciso que elas fiquem perfeitamente do centro da tela, não só no meu monitor 1400x900, mas também em diversos outros tamanhos de tela. O problema é que a imagem não fica perfeitamente no centro, apenas a borda esquerda da imagem fica no centro verticalmente. Espero que consigam me compreender. :natallaugh:



style.ccs

body{
	overflow:hidden;
	background-color: black;
}
div#principal{
	margin: 50% 50% 0px 50%;
}
div#principal img.luz{
	position: absolute;
	margin:auto;

}

[reebr 94]

Já tentou colocar um:

html, body {
  height: 100%
}

Nessa resposta da Diéssica há duas alternativas de centralização vertical/horizontal de um elemento.

 

Outra forma é com flexbox, mas nesse caso você precisa ficar atento ao suporte dos navegadores. Fazendo o uso das propriedades align-items e justify-content você pode centralizar a imagem independente do tamanho de tela:

<img src='http://i.imgur.com/Bog9qFf.jpg'/>

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%
}

body {
    display: -webkit-flex;
     display: -ms-flexbox;
            display: flex;
    
    -webkit-align-items: center;
      -webkit-box-align: center;
	 -ms-flex-align: center;
            align-items: center;
    
    justify-content: center;
}

DEMO

[Nolram 0]

Funcionou! Esse daqui funcionou perfeitamente! Obrigado!

div#principal img.luz{
 position: absolute;
 top: 0; bottom: 0;
 left: 0; right: 0; 
 margin: auto;
}