Угловое 2 Материал - Как Центр Прогресс Spinner

Question

Я реализовал Угловое 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

Ну, это будет трудно сказать вам, что делать, не видя разметки HTML. CSS является вашим другом здесь и, возможно, эта страница может помочь вам: W3.org

Answer 3

Это CodePen помогли мне создать страницу в центре блесну с материалом Дизайн в угловых 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); 
}