Angular 2 Material - 如何将进度旋转器居中显示

Question

我已经从以下链接实现了Angular 2进度条。

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

我希望将其居中，但是唯一能让它正常工作的方法似乎是删除

标签。

display: block 

从CSS中移除它。然而，这会导致页面上的旋转器显得非常巨大。

有任何建议将是极好的。

- user2085143

Answer 1

只需添加边距规则：

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

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

更新

只想分享并演示其他6种通用居中解决方案

• FLEX:

.center {
  display: flex; 
  justify-content: center; 
  align-items: center;
}


/* +++++++ 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>

• 网格：

.center {
  display: grid; 
  place-items: center;
}


/* +++++++ 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>

• 行高 + 文字对齐（对于多行文本可能无法按预期工作，请使用 white-space: 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>

• 使用绝对定位、top、left和transform translate

.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>

• 使用绝对定位、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>

使用表格。

.center {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

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

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

- Andriy

---

这个可以运行。我不是很擅长CSS，但你怎么用flexbox实现这个呢？ - brijmcq

您可以添加一个包装div，并使用style="display: flex; justify-content: center; align-items: center;"，以使任何元素居中。您可以在http://the-echoplex.net/flexyboxes/上练习flex技巧。 - Andriy

或者使用CSS：mat-spinner { margin: 0 auto; } - patrickbadley

Answer 2

这个 CodePen 帮助我使用 Material Design 在 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>

组件.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);
}

- György Balássy

---

第一种解决方案不是垂直居中，但你的解决方案完美适用。非常感谢。 - Halil İbrahim Oymacı

Answer 3

第一个答案在未在父元素中设置高度时无法工作。

我使用fxFlex修复了它。

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

- Worthy7

---

似乎唯一需要的是 fxLayoutAlign="center"。 - cevaris

Answer 4

我正在使用Angular 6与Material 2+，并使用以下CSS代码：

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

- user3515688

---

你不必再写 margin-right: 50%。只需要使用 margin-left: 50% 即可。 - Corné

@Corné 那么你应该使用 transform: translateX(-50%)，否则它无法完美居中。 - Chris Fremgen

Answer 5

来源: 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%);
}

- Xantipus

Answer 6

你也可以与网格一起使用：

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

- yanai edri