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

我正在使用角度6和2+材质，并使用了CSS代码：

.mat-spinner {
    position: relative;
    margin-left: 50%;
    margin-right: 50%;
}

Answer 4

除非在父元素中设置了高度，否则第一个答案将无效。

我使用fxFlex修复了它

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

Answer 5

您可以将网格用作墙：

.wrapper{
  display: grid; 
  place-content: center; 
  height: calc(100vh - 20px);
  background: red;
    }

Answer 6

来源：Angular Wiki

对我来说，这是最好的：

组件：

<div class="center">
    <mat-spinner> </mat-spinner>
</div>

Scss：

/** Can be used to center any element */
.center {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

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

6 个答案: