javascript - 如何使父div的ajax旋转动画中心？

Question

我有以下网页的 html 骨架。

<div class="grand-parent">
    <div class="header">Heading</div>
    <div class="parent-div">
        <div class="child-div-1">
        </div>
        <div class="child-div-2">
        </div>
        <div class="child-div-3">
        </div>
        <div class="ajax-loader-container">
            <div class="ajax-loader"></div>
        </div>
        <div class="clear"/>
    </div>
</div>

我想将旋转动画 gif 制作成 parent-div 的中心。在显示旋转动画时，还要在父 div 的顶部添加一个叠加层。如何通过css实现？

我试过 css 下面，但没有按预期工作。它没有显示叠加层。

.ajax-loader-container {
    top: 0;
    position: relative;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999999999999;
    background: #f8f8f8;
    opacity: .8;
}

.ajax-loader {
    background: url(spinner.gif);
    position: fixed;
    left: 50%;
    top: 50%;
    width: 2em;
    height: 2em;
    background-size: contain;
    display: block;
    margin: auto;
}

Answer 1

假设您要以某种方式显示/隐藏加载程序，下面是一种正确定位的方法。但请记住，.ajax-loader-container 现在将位于您的内容之上。

.parent-div{
  position: relative;
}

.ajax-loader-container {
    top: 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999999999999;
    background: #f8f8f8;
    opacity: .8;
}

.ajax-loader {
    background: #f00;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2em;
    height: 2em;
    background-size: contain;
    display: block;
    margin: auto;
}

<div class="grand-parent">
    <div class="header">Heading</div>
    <div class="parent-div">
        <div class="child-div-1 child-div">
        </div>
        <div class="child-div-2 child-div">
        </div>
        <div class="child-div-3 child-div">
        </div>
        <div class="ajax-loader-container">
            <div class="ajax-loader"></div>
        </div>
        <div class="clear"/>
    </div>
</div>