只需添加边距规则：

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

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

• • 更新**

只是想分享和演示其他6种通用定心解决方案

• 弯曲：

x一个一个一个一个x一个一个二个x

• 网格：

一个三个三个一个

• 行高+文本对齐（对于多行将无法正常工作，请使用空格：nowrap;确保一条线）

.center {
  line-height: calc(100vh - 20px);
  text-align: center;
}

/* +++++++ STYLES +++++++ */
.wrapper {
  background: red;
  white-space: nowrap;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
  display: inline;
}

<div class="wrapper center">
  <div class="inner">INNER CONTENT</div>
</div>

• 使用"绝对"、"上"、"左"和"转换"

.center.wrapper {
  position: relative;
}
.center .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* +++++++ STYLES +++++++ */
.wrapper {
  height: calc(100vh - 20px);
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
}

<div class="wrapper center">
  <div class="inner">INNER CONTENT</div>
</div>

• 使用ABSOLUTE，TOP，LEFT，BOTTOM，RIGHT和MARGIN AUTO（由György Balássy提到）。注意：需要设置内部div宽度。

.center.wrapper {
  position: relative;
}
.center .inner {
  position: absolute;
  inset: 0;
  margin: auto;
}

/* +++++++ STYLES +++++++ */
.wrapper {
  height: calc(100vh - 20px);
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
  height: max-content;
  width: max-content;
}

<div class="wrapper center">
  <div class="inner">INNER CONTENT</div>
</div>

• 使用表格

一个一个一个一个

这款CodePen帮助我用Material Design in Angular 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);
}

除非在父元素中设置了height，否则第一个答案是无效的。
我用fxFlex修复了它

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

我使用Angular 6与材料2+和使用的CSS代码：

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

• • 来源**：Angular Wiki

对我来说，这是最有效的：
组件：

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

安全等级：

/** 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%);
}

您也可以将与网格一起使用：

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