cómo mostrar la imagen en el centro de un div

Question

He div imagen gif ajax-loader

<div id="mydiv" style="height: 400px; text-align: center;"> 
    <img src="/Content/ajax-loader.gif" class="ajax-loader"/> 
</div> 

.ajax-loader 
{ 
    /*hidden from IE 5-6 */ 
    margin-top: 0; /* to clean up, just in case IE later supports valign! */ 
    vertical-align: middle; 
    margin-top: expression((150 - this.height)/2); 
} 

con, pero no pudo conseguir que aparece en el centro (tanto vertical como horizontalmente). Necesito ayuda con eso.

Answer 1

El siguiente se supone que la anchura y altura de la imagen es conocida:

#mydiv { 
 
    height: 400px; 
 
    position: relative; 
 
    background-color: gray; /* for demonstration */ 
 
} 
 
.ajax-loader { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -32px; /* -1 * image width/2 */ 
 
    margin-top: -32px; /* -1 * image height/2 */ 
 
}

<div id="mydiv"> 
 
    <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader"> 
 
</div>

ACTUALIZACIÓN: en los navegadores modernos margin: auto producirá el resultado deseado PLAZO DE conociendo el ancho/alto de la imagen:

#mydiv { 
 
    height: 400px; 
 
    position: relative; 
 
    background-color: gray; /* for demonstration */ 
 
} 
 
.ajax-loader { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; /* presto! */ 
 
}

<div id="mydiv"> 
 
    <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader"> 
 
</div>

Answer 2

usted puede hacerlo con el atributo alinear

<div id="mydiv" align="center"> 
<img src="/Content/ajax-loader.gif" class="ajax-loader"/> 
</div> 

Answer 3

completa ajax pantalla del cargador, con un poco de opacidad.

usando

$('#mydiv').show(); 
$('#mydiv').hide(); 

para activarlo.

#mydiv { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:1000; 
    background-color:grey; 
    opacity: .8; 
} 

.ajax-loader { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -32px; /* -1 * image width/2 */ 
    margin-top: -32px; /* -1 * image height/2 */ 
    display: block;  
} 

<div id="mydiv"> 
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/> 
</div> 

Answer 4

lugar este div justo dentro de la zona en la que está actualizando:

<div id="myLoader" class="ajax-loader"></div> 

y añadir esto a tu CSS:

.ajax-loader { 
    cursor: wait; 
    background:#ffffff url('ajax-loader.gif') no-repeat center center; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
    filter: alpha(opacity=75); 
    opacity: 0.75; 
    position: absolute; 
    z-index: 10000; 
    display: none; 
} 

Cuando desea mostrar que, a llamarlo:

$('#myLoader').css({ 
    height: $('#myLoader').parent().height(), 
    width: $('#myLoader').parent().width() 
}); 
$('#myLoader').show(); 

o algún eq uivalente

Answer 5

Otro enfoque para centrar horizontalmente y verticalmente una imagen dentro de un div:

1. imagen desconocida tamaño
2. div desconocido tamaño
3. sensible

DEMO

HTML:

<div> 
    <img src="http://lorempixel.com/output/people-q-g-50-50-1.jpg" alt="" /> 
</div> 

CSS: La solución de

div{ 
    position:relative; 
} 

img{ 
    position:absolute; 
    top:0; bottom:0; 
    left:0; right:0; 
    margin:auto; 
} 

Answer 6

de Dave Morgan trabajó para mí.

Aquí hay una versión más limpia de la misma.

El problema con todas las soluciones anteriores es que debe crear alguna imagen o div en su contenedor de antemano. Eso es un desperdicio de recursos y hace que sea difícil aplicarlo a objetivos específicos. Deje que jquery genere div en su lugar.

Aquí está mi código:

js

$('#trigger').on('click', function(){ 
    var target = $('#stage'); 
    var el = $('<div class="spinner" />').width(target.width()).height(target.height()); 
    target.prepend(el); 
}); 

css

.spinner{ 
    position: absolute; 
    cursor: wait; 
    z-index: 10000; 
    -khtml-opacity:.50; 
    -moz-opacity:.50; 
    -ms-filter:"alpha(opacity=50)"; 
    filter:alpha(opacity=50); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); 
    opacity:.50; 
    background: url('../img/system/ajax.gif') no-repeat center #f8f8f8; 
} 

Answer 7

Uso:

display:inline-block; 

O:

display:block; 

Y:

text-align:Center; 

Dentro del archivo CSS ... Entonces aparecerá