Centering a spinner within a div

Question

.templateCard {
  width: 136px;
  height: 260px;
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 10px;
}
#spinner {
  margin: auto;
  width: 20px;
  height: 20px;
  border: solid black;
}

<div id="card01" class="thumbnail templateCard">
  <div id="spinner" class="ms-Spinner"></div>
  <img src="/Content/img/template01.png" alt="...">
  <div class="caption">
    <h3>Rapport 1</h3>
  </div>
</div>

I have this piece of code. I want the spinner-div to be centered both horizontally and vertically in the card01 div. I can only manage to center it horizontally. It seems like the problem is the two other divs inside the card01-div, as i can center the spinner in another empty div (but not in this div container two additional divs).

So I want the spinner to overlay the other content in card01.

EDIT: and also, the card01-div must not resize when the spinner appears!

Answer 1

use position:relative/absolute,

below are two examples,

• aligning to full card
• aligning only to the image

.templateCard {
  border: 1px dashed red;
  /* demo */
  width: 136px;
  display: inline-block;
  vertical-align: top;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 10px;
  position: relative;
}
#spinner {
  margin: auto;
  width: 20px;
  height: 20px;
  border: solid black;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}
#card02.templateCard {
  height: 260px
}

<div id="card01" class="thumbnail templateCard">
  <div id="spinner" class="ms-Spinner"></div>
  <img src="//placehold.it/136" alt="...">
  <div class="caption">
    <h3>Rapport 1</h3>
  </div>
</div>

<div id="card02" class="thumbnail templateCard">
  <div id="spinner" class="ms-Spinner"></div>
  <img src="//placehold.it/136x260" alt="...">
  <div class="caption">
    <h3>Rapport 1</h3>
  </div>
</div>