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

【问题标题】：loading Spinner - always keep in the middle of the screen even while scrolling the page加载 Spinner - 即使在滚动页面时也始终保持在屏幕中间
【发布时间】：2015-09-23 03:14:20
【问题描述】：

<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>

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

请帮帮我。

【问题讨论】：

将样式应用于位置：固定
你试过固定位置还是粘性位置？
请努力尝试自己找到解决方案并在此处发布您的代码。
您应该在包含的 div 上使用 position:fixed，然后您需要添加一些其他样式以使其在屏幕上居中
我也试过了。我刚刚发现了问题。这是由于一些定义了页面顶部的css而发生的。这里是 .PopupPanel { position: absolute;左：50%；最高：50%； z 指数：100；高度：400px；边距顶部：-200px；宽度：600px；左边距：-300px；现在我已经根据你的 cmets 解决了这个问题。谢谢

标签： javascript jquery html css asp.net-mvc

【解决方案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
}

【讨论】：

非常感谢，工作就像一个魅力，你拯救了我的一天。

【解决方案2】：

这是我的解决方案...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
  <style>    
    body {
      height: 100%;
      position: relative;
    }

    .k-loading-image{
      position: fixed;
    }
    
    .longDiv {
      height:1500px;
      background: red;
    }
  </style>

  <div class="longDiv">This is a long DIV...</div>
  
  <script>
    const showBusyIndicator = (show) => kendo.ui.progress($("body"), show);
    $(document).ready(showBusyIndicator(true));
  </script>
</body>
  
</html>

【讨论】：