javascript - 加载 Spinner - 即使在滚动页面时也始终保持在屏幕中间

Question

<div id="Dvloading" style="float: left;">
        <i id="loadingSpinner" class="icon-spinner icon-spin blue" style="margin-left: 50%; position:absolute ; margin-top: 25%; z-index: 1000; font-size: 800%;"></i>
</div>

这是在页面加载时显示加载图形的代码。它显示在 GridView 上方。当网格包含大量行时，当我向下滚动页面时，我看不到加载图形。但是当我转到屏幕顶部时，我可以看到加载图形。如何在滚动页面时始终将其保持在屏幕中间？

请帮帮我。

Answer 1

我检查了我的旧答案，看看是否可以添加一些更现代的东西。在我较新的解决方案中，您不需要指定高度或宽度。这是一个更通用的解决方案。

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

---

试试这个:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px; //Half of the height of the loading graphic
  margin-left: -50px; //Half of the width of the loading graphic
}