角2材料 - 如何中心進展微調

Question

我從下面的鏈接實現的角2個進度微調

https://github.com/angular/material2/tree/master/src/lib/progress-spinner

我想有它爲中心，但是，我似乎可以的唯一途徑得到它的工作是從CSS刪除

display: block 

。但是，這會導致微調器在頁面上顯得很大。

任何建議將是偉大的。

Answer 1

只需添加保證金規則：

<md-progress-spinner style="margin:0 auto;" mode="indeterminate"></md-progress-spinner> 

plunker：http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview

Answer 2

那麼這將很難告訴你該怎麼做，而不看到生成的HTML標記。 CSS是你的朋友在這裏，也許這個頁面可以幫助你：W3.org

Answer 3

這CodePen幫助我創建材質頁面爲中心的微調設計在角4：https://codepen.io/MattIn4D/pen/LiKFC

Component.html：

<div class="loading-indicator"> 
    <mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner> 
</div> 

Component.css：

/* Absolute Center Spinner */ 
.loading-indicator { 
    position: fixed; 
    z-index: 999; 
    height: 2em; 
    width: 2em; 
    overflow: show; 
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

/* Transparent Overlay */ 
.loading-indicator:before { 
    content: ''; 
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.3); 
}