角度2材料 - 如何使进度微调器居中

Question

我已经从下面的链接实现了Angular 2进度微调器

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

我想让它居中,然而,我似乎能够让它发挥作用的唯一方法就是删除它

display: block 

来自CSS.但是,这会导致微调器在页面上显得很大.

任何建议都会很棒.

Answer 1

只需添加保证金规则:

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

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

Answer 2

这个CodePen帮我创建了一个以页面为中心的微调器,它使用Angular 4中的Material Design: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);
}

Answer 3

除非在父元素中设置了高度，否则第一个答案不起作用。

我使用 fxFlex 修复了它

<div fxLayout="row" fxLayoutAlign="space-around center" style="height:100%">
        <mat-spinner diameter="50" strokeWidth="5"></mat-spinner>
</div>