CSS：位于屏幕中央的位置加载指示器

如何将我的加载指示器放置在屏幕中央。目前我使用一个小占位符，它似乎工作正常。但是，当我向下滚动时，加载指示器保持在该预定位置。我怎样才能让它跟随滚动，使它始终位于顶部？CSS：位于屏幕中央的位置加载指示器

#busy 
{ 
    position: absolute; 
    left: 50%; 
    top: 35%; 
    display: none; 
    background: transparent url("../images/loading-big.gif"); 
    z-index: 1000; 
    height: 31px; 
    width: 31px; 
} 

#busy-holder 
{ 
    background: transparent; 
    width: 100%; 
    height: 100%;   
}

来源

2011-06-06 Frank Vilea

我不确定您的问题。也许位置：固定。 HTML将有所帮助。 – Jawad 2011-06-06 17:55:00

使用position:fixed代替position:absolute

第一个是相对于你的屏幕窗口。（不受滚动影响）

第二个是相对于页面。（受滚动影响）

注意：IE6不支持position：fixed。

来源

2011-06-06 18:00:03 Kraz

@Kraz：接下来的问题是，根据当前视口，如何在特定div的中心执行此操作：http://stackoverflow.com/questions/17762818/how-to-center-image-in-the-specific -div-根据当前视口位置 – noisy 2013-07-20 13:39:25

afaik，它目前不适用于CSS。将需要'position：absolute'（'fixed'将不起作用）和其他值（top，right ...）用javascript确定。 – Kraz 2013-07-22 13:52:04

变化的位置绝对的DIV忙着固定

来源

2011-06-06 17:59:08

.loader{ 
 
position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url('../img/loaderred.gif') 50% 50% no-repeat rgb(249,249,249); 
 
}

<div class="loader"></div>

来源

2015-03-25 18:42:26

这就是我对角4完成：加入

<style type="text/css"> 
    .centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    transform: -webkit-translate(-50%, -50%); 
    transform: -moz-translate(-50%, -50%); 
    transform: -ms-translate(-50%, -50%); 
    color:darkred; 
    } 
</style> 

</head> 

<body> 
    <app-root> 
     <div class="centered"> 
      <h1>Loading...</h1> 
     </div> 
    </app-root> 
</body>

来源

2017-06-24 18:36:32 Salim

在角4

为我工作style="margin:0 auto;"

<mat-progress-spinner 
    style="margin:0 auto;" 
    *ngIf="isLoading" 
    mode="indeterminate"> 
    </mat-progress-spinner>

来源

2017-12-20 06:13:06

CSS：位于屏幕中央的位置加载指示器

回答

相关问题