How to center image in the specific div according to current viewport position?

Question

I am trying create nice animation during loading content using ajax. I want to use display icon during reloading div with "Content", however I can't figured out is it possible to do that only with CSS.

Icon should:

1. horizontally always in the center of div with "Content"
2. vertically always in the center of "visible part of content"
3. should stay during whole animation in the vertically center of "visible part of content" during slide animation which hides Menu.

If vertical centering according to "visible part of content" is not possible, it would be ok to center image according to viewport of the browser.

[EDIT]:

Here is my fiddle: http://jsfiddle.net/QWB9x/74/ and the part which probably should be changed:

.loading #img_loading {
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
}

Answer 1

This works best for me :)

function loadNewContent(){
 $(".loaderCont").removeClass("loading")
}

$(document).ready(function () {

 $("#hide_button").on("click", function () {
      $(this).closest(".bottom").toggleClass("left_hided");
      $(".loaderCont").toggleClass("left_hided2");
 });

 $("#filter1,#filter2,#filter3,#filter4").on("click", function() {
     $(".loaderCont").addClass("loading");
     setTimeout(loadNewContent, 2000);
 });
});

CSS:

.header {
    background-color: Green;
    width: 100%;
    margin-bottom: 20px;
     height: 100px;
}
.left {
    background-color: Red;
    float: left;
    width: 100px;
}
.left_hided .left{
    margin-left: -85px;
}
.right {
    background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
    width: calc(100% - 140px);
    float: right;
}

.left_hided .right{
     width: calc(100% - 55px);
}

input{
    float:right;
}

.loaderCont {
    background-color: rgba(255, 0, 0, 0.6);
    height: 100%;
    width: calc(100% - 140px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

.left_hided2 {
     width: calc(100% - 55px);
}

#loader {
    background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center;
    position: relative;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    display: block;
     height: 32px;
     width: 32px;
}

.loading {
    z-index: 9001;
}

JSFiddle: http://jsfiddle.net/ZRwzr/1/