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：位於屏幕中央的位置加載指示器

回答

相關問題