角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); 
}