html - 在 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>

我有这段代码。我希望 spinner-div 在 card01 div 中水平和垂直居中。我只能设法将它水平居中。似乎问题出在 card01-div 中的另外两个 div，因为我可以将微调器置于另一个空的 div 中(但是不在此 div 容器中有两个额外的 div)。

所以我希望微调器覆盖 card01 中的其他内容。

编辑:此外，当微调器出现时，card01-div 不得调整大小!

Answer 1

使用position:relative/absolute,

下面是两个例子，

• 对齐全卡
• 仅与图像对齐

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