Angular 2 Material - 如何居中进度微调器

Posted 2023-03-06

【中文标题】Angular 2 Material - 如何居中进度微调器

【英文标题】：Angular 2 Material - How To Center Progress Spinner

【发布时间】：2017-05-14 06:34:32

【问题描述】：

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

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

我想让它居中，但是，我似乎让它工作的唯一方法是删除

display: block 

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

任何建议都会很棒。

【参考方案1】：

只需添加边距规则：

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

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

更新

只是想分享和演示其他 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>

使用 ABSOLUTE、TOP、LEFT 和 TRANSFORM TRANSLATE

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

【讨论】：

这个有效。我在 CSS 方面不是很擅长，但你如何使用 flexbox 来实现这一点？

您可以通过添加带有 style="display: flex; justify-content: center; align-items: center;" 的包装器 div 来居中任何元素。您可以在the-echoplex.net/flexyboxes

练习 flex

或使用 css: mat-spinner margin: 0 auto;

【参考方案2】：

这个 CodePen 帮助我在 Angular 4 中使用 Material Design 创建了一个以页面为中心的微调器：https://codepen.io/MattIn4D/pen/LiKFC

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

【讨论】：

第一个解决方案不是垂直居中，但您的解决方案非常适合它。非常感谢。

【参考方案3】：

我使用 angular 6 和材料 2+ 并使用了那个 CSS 代码：

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

【讨论】：

您也不必说margin-right: 50%。你只需要使用margin-left: 50%

@Corné 那你应该transform: translateX(-50%)，否则它不会完全居中。

【参考方案4】：

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

我使用 fxFlex 修复了它

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

【讨论】：

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

【参考方案5】：

你也可以使用网格：

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

【参考方案6】：

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