Question

我有div作为AJAX加载程序'图像'。这是纯粹的CSS。我遇到的问题是，页面有很多内容，如果你在页面的某个地方，你将看不到加载器，因为它显示在页面顶部的某个地方（看不见）。

我需要改变什么：

<div id="floatingBarsG" style="display: none; position: absolute; top: 50%; left: 50%; padding: 2px; z-index: 99999">
    <div class="blockG" id="rotateG_01">
    </div>
    <div class="blockG" id="rotateG_02">
    </div>
    <div class="blockG" id="rotateG_03">
    </div>
    <div class="blockG" id="rotateG_04">
    </div>
    <div class="blockG" id="rotateG_05">
    </div>
    <div class="blockG" id="rotateG_06">
    </div>
    <div class="blockG" id="rotateG_07">
    </div>
    <div class="blockG" id="rotateG_08">
    </div>
</div>

尝试了各种margin选项，但没有任何效果。

Answer 1

试试这个：

#floatingBarsG
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 2

在这里，您的装载机不会位于div的中心。见：

#floatingBarsG {
    width:30px;
    height:16px;
    position:fixed;
    top:50%;
    margin-top:-8px; */half of your loader height*/
    left:50%;
    margin-left:-15px; */half of your loader width*/
    */this will help you that the loader be at the center of your div and it is fixed there.*/
}

在一个内容很多的页面中保持ajax加载器

2 个答案: