Question

I have the following html structure:

<div class="container">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content-loading"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

and the following css:

.container {
    background: #FFFFFF;
    width: 627px;
    margin: 0 auto;
}
.header {
    background: #F7F7F7;
    border: 1px solid #A3B6C9;
    padding:1px 10px 10px 10px;
}

.sidebar {
    float: right;
    width: 167px;
    background: #F7F7F7;
    padding-bottom: 10px;
    text-align: center;
    padding-top: 10px;
}
.content {
    padding: 10px 0;
    width: 460px;
    float: right;
}

.content-loading  { 
  background: white url('/images/loadingIndicator_2.gif') center center no-repeat; 
}

I need to display that image (loadingIndicator_2.gif) in the center of content div, when ajax is loading:

  $.ajax({
      beforeSend: function(){
          $( ".content-loading" ).show();                      
      },
      complete: function(){
          $( ".content-loading" ).hide();
      }                  
  });

But the image is not centred. Looks like I need to choose some other approach (probably, not use content-loading div?).

Answer 1

Add to the css class .content-loading

position: absolute;
width: 100%;
height: 100%;

Also see my jsfiddle.

=== UPDATE ===

In this jsfiddle the .content-loading is over the .container.
Here only over the .content.

If you want to see the content too, replace the white with transparent.