css para centrar una imagen horizontalmente

Question

Estoy tratando de centrar una imagen horizontalmente usando css.

estoy mostrando mi imagen en la pantalla con el siguiente código HTML:

<div id="loading" class="loading-invisible"> 
    <img class="loading" src="logo.png"> 
</div> 

estoy Croping mi imagen, ya que sólo quiero mostrar algo de la imagen y estoy usando el siguiente CSS:

img.loading 
{ 
position:absolute; 
clip:rect(0px,681px,75px,180px); 
} 

Sin embargo, no puedo averiguar cómo centrar la imagen una vez que ha sido recortada.

¿Alguien puede ayudar?

Answer 1

posición de uso absoluta y el margen como esto

img.loading{ 
    position: absolute; 
    left: 50%; 
    margin-left: -(half ot the image width)px 
} 

Answer 2

Uso margin

margin-left:auto; 
margin-right:auto; 

Answer 3

Pruebe esto para su CSS:

.center img {   
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
} 

y luego añadir a su imagen para centrarla:

class="center"