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

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

我想让它居中,然而,我似乎唯一能让它工作的方法就是go 掉

display: block 

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

任何建议都是很棒的.

推荐答案

只需添加保证金规则:

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

普朗克:http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview

UPDATE

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

  • 弯曲:

.wrapper {
  display: flex; 
  justify-content: center; 
  align-items: center;
  height: calc(100vh - 20px);
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
}
<div class="wrapper">
  <div class="inner">INNER CONTENT</div>
</div>

  • 网格:

.wrapper {
  display: grid; 
  place-items: center;
  height: calc(100vh - 20px);
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
}
<div class="wrapper">
  <div class="inner">INNER CONTENT</div>
</div>

  • 相同高度和线条高度+文本对齐

.wrapper {
  line-height: calc(100vh - 20px);
  height: calc(100vh - 20px);
  text-align: center;
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
  display: inline;
}
<div class="wrapper">
  <div class="inner">INNER CONTENT</div>
</div>

  • 使用绝对平移、顶部平移、左侧平移和变换平移

.wrapper {
  height: calc(100vh - 20px);
  background: red;
  position: relative;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="wrapper">
  <div class="inner">INNER CONTENT</div>
</div>

Angular相关问答推荐

FormArray包含嵌套的FormGroups.如何访问嵌套的表单组控件?

如何在Angular 17中使用Angular—calendum?

Angular:将服务注入非独立组件导致应用程序中断

[已解决]如何在模块ngDoBootstrap中测试Angular 自定义元素和做覆盖

为什么在回调完成之前,可观察对象会返回?

如何在AngularJs中剪断细绳

根据环境变量动态加载Angular templateUrl

RxJS如何按顺序进行POST请求,只有在前一个完成后才会触发新的请求?

MAT折叠面板的动态开启和关闭无法工作

如何在独立组件中导入Angular innerHTML

需要做什么才能使 ErrorHandler 正常工作?

Angular:为什么在我的自定义 ErrorHandler 中订阅主题不触发?

angular material日期 Select 器中的日期不正确

如何以编程方式关闭 ng-bootstrap 模式?

*ngIf 和 *ngFor 在 元素上使用

如何以像素为单位将属性绑定到 style.width?

无法绑定到matDatepicker,因为它不是 input的已知属性

如何将组件导入Angular 2中的另一个根组件

实现autocomplete功能

如何防止角material垫菜单关闭?