How to display image in the center of a div

I have div with ajax-loader gif image

<div id="mydiv" style="height: 400px; text-align: center;">
    <img src=开发者_Go百科"/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); 
}

But could not get it displayed in the center (both vertically and horizontally). Need help with that.

The following assumes that the width and height of the image is known:

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

UPDATE: in modern browsers margin: auto will produce the desired result withing knowing the width/height of the image:

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

Full screen ajax loader, with some opacity.

using

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

to toggle it.

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

Place this div just inside the area you are updating:

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

And add this to your 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;
}

When you want to display it, just call:

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

or some equivalent.

Other approach to center horizontaly and verticaly an image inside a div:

1. unknown image size
2. unkown div size
3. responsive

DEMO

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

Use:

display:inline-block;

Or:

display:block;

And:

text-align:Center;

Inside the CSS file... Then it will appear

You can do it with attribute align

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

Dave morgan's solution worked for me.

Here is a bit cleaner version of it.

The problem with all the solutions above is that you need to create some image or div in your container before hand. That is a waste of resources and makes it hard to apply to specific targets. Let jquery generate the div instead.

Here is my code:

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