Ajax 如何根据当前视口位置将图像居中于特定div中？

我尝试在使用ajax加载内容的过程中创建漂亮的动画。我想在用“Content”重新加载div时使用display图标，但是我不知道是否只有用CSS才能做到这一点

图标应：

水平方向始终位于div的中心，带有“Content”

垂直始终位于“内容可见部分”的中心

在隐藏菜单的幻灯片动画期间，整个动画应保持在“内容可见部分”的垂直中心

若无法根据“内容的可见部分”垂直居中，则可以根据浏览器的视口居中图像

[编辑]：

这是我的提琴：还有可能应该改变的部分：

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

使用z索引示例：-

 <div style="z-index:100;">loading image</div> 

加载图像

---

以上将解决问题的一半，您需要使用javascript动态更新左侧

为了满足您的要求，您需要使用JavaScript来确定加载图像需要使用固定位置div放置在可见部分上的位置，然后在用户调整窗口大小或滚动窗口时重新定位，使其始终处于所需位置

$(window).scroll(function() {
    scrolling();
});

$(window).resize(function() {
   scrolling(); 
});

scrolling();

function scrolling() {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var offsetTop = $('#thediv')[0].offsetTop;
    var offsetHeight = $('#thediv')[0].offsetHeight;

    var offsetWidth = $('#thediv')[0].offsetWidth;

    var top = offsetTop - scrollTop;
    top = top < 0 ? 0 : top;

    var bottom = (scrollTop + windowHeight) - (offsetHeight + offsetTop);
    bottom = bottom < 0 ? 0 : bottom;

    $('.image').css('top', top);
    $('.image').css('bottom', bottom);
    $('.image').css('width', offsetWidth);
}

---

这里是JSFIDLE

，您不需要编写太多脚本来为其分配位置。你可以用简单的css来实现

只需使加载程序相对于其父级。指定高度和宽度并执行以下css部分

.loader{
位置：相对位置；
顶部：-高度的一半；
左：-宽度的一半；
利润率最高：50%；
左边距：50%；
}

适用于所有设备这对我来说最合适：）

CSS:

---

JSFiddle:

这一部分很明显；）问题是如何使用位置：[固定/绝对/相对]、顶部、左侧、边距等。到目前为止，您有什么？你有JSFIDLE吗？@jamcoope:添加到问题中。这会将loadingImage放在屏幕的中心，但不会放在div的中心。请看我添加到问题中的小提琴。啊哈，我完全误解了这个问题。。只有通过计算可见区域，才能使用javascript实现这一点。。并定位图像。。让我编辑一下答案。。

$(window).scroll(function() {
    scrolling();
});

$(window).resize(function() {
   scrolling(); 
});

scrolling();

function scrolling() {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var offsetTop = $('#thediv')[0].offsetTop;
    var offsetHeight = $('#thediv')[0].offsetHeight;

    var offsetWidth = $('#thediv')[0].offsetWidth;

    var top = offsetTop - scrollTop;
    top = top < 0 ? 0 : top;

    var bottom = (scrollTop + windowHeight) - (offsetHeight + offsetTop);
    bottom = bottom < 0 ? 0 : bottom;

    $('.image').css('top', top);
    $('.image').css('bottom', bottom);
    $('.image').css('width', offsetWidth);
}

.image {
    position: fixed;
    text-align:center;
    background-image:url('http://i.stack.imgur.com/FhHRx.gif');
    background-repeat:no-repeat;
    background-position:center center;
    background-color:rgba(255,255,255,.4);
}

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

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