[SOLVED] Angular 2 Material - How To Center Progress Spinner

Angular 2 Material - How To Center Progress Spinner

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.

Solution

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>