Angular 2 Material - How To Center Progress Spinner - css

Question

I have implemented the Angular 2 progress spinner from the below link
https://github.com/angular/material2/tree/master/src/lib/progress-spinner
I would like to have it centered, however, the only way I can seem to get it to work is to remove the
display: block
from the CSS. However, this causes the spinner to appear huge on the page.
Any advice would be great.

Answer 1

just add margin rule:
<md-progress-spinner style="margin:0 auto;"
mode="indeterminate"></md-progress-spinner>
plunker: http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview
UPDATE
Just wanted to share and demonstrate 6 other general centering solutions
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>
GRID:
.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>
LINE HEIGHT + TEXT ALIGN (will not work as desired for multiple lines, use white-space: nowrap; to ensure one line)
.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>
USING ABSOLUTE, TOP, LEFT and 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>
USING ABSOLUTE, TOP, LEFT, BOTTOM, RIGHT and MARGIN AUTO (mentioned by György Balássy). Note: inner div width needs to be set.
.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>
Using TABLE
.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>

Answer 2

This CodePen helped me to create a page-centered spinner with 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);
}

Answer 3

The first answer doesn't work unless height is set in a parent element.
I fixed it using fxFlex
<div fxLayout="row" fxLayoutAlign="space-around center" style="height:100%">
<mat-spinner diameter="50" strokeWidth="5"></mat-spinner>
</div>

Answer 4

I am using angular 6 with material 2+ and used that CSS code:
.mat-spinner {
position: relative;
margin-left: 50%;
margin-right: 50%;
}

Answer 5

Source: Angular Wiki
For me, this worked the best:
Component:
<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%);
}

Answer 6

you can use with grid as well :
.wrapper {
display: grid;
place-content: center;
height: calc(100vh - 20px);
background: red;
}