Comment afficher l'image au centre d'un div

Question

J'ai div avec ajax-loader gif image

<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); 
}

Mais ne pouvait pas l'afficher au centre (à la fois verticalement et horizontalement). J'ai besoin d'aide.

Answer 1

Chargeur ajax plein écran, avec une certaine opacité.

en utilisant

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

pour le basculer.

#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 2

Placez cette div juste à l'intérieur de la zone que vous mettez à jour :

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

Et ajoutez ceci à votre 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;
}

Lorsque vous souhaitez l'afficher, il vous suffit d'appeler :

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

ou un équivalent.

Answer 3

Cela a fonctionné pour moi aussi :

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

Answer 4

Autre approche pour centrer horizontalement et verticalement une image à l'intérieur d'un div :

1. taille d'image inconnue
2. taille de div inconnue
3. responsive

DÉMO

HTML :

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

CSS :

div{
    position:relative;
}

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