html - 在包含很多内容的页面中保持 ajax 加载器可见

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