如何在 CSS 微调器中居中文本？

Question

我在互联网上的某个地方找到了一段 CSS 片段，它重新创建了很酷的 PayPal 微调器，然后我做了一个小提琴：

https://jsfiddle.net/55s5oxkf/5/

它工作得很好，但我不知道如何将文本放置在该微调器的中心，例如“正在加载...”。我已经修修补补和尝试，但无法得到任何工作。

这是CSS：

.spinner.loading {
    display: none;
    padding: 50px;
    text-align: center;
}
.spinner.loading:before {
    content: "";
    height: 90px;
    width: 90px;
    margin: -15px auto auto -15px;
    position: absolute;
    top: 35%;
    left: 45%;
    border-width: 8px;
    border-style: solid;
    border-color: #2180c0 #ccc #ccc;
    border-radius: 100%;
    animation: rotation .7s infinite linear;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

和 HTML：

<div id="divSpinner" class="spinner loading"></div>

在开始和结束 div 元素之间放置文本没有任何作用。有任何想法吗？

Answer 1

<center> 不再支持（在 html5 中不推荐使用中心）所以使用这样的类：

.centered {
  text-align: center;
}

然后使用 calc 获取加载文本的正确位置：

.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}

.centered {
  text-align: center;
}

.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}

$("#btnLoadRecords").click(function() {
  $("#divSpinner").show();
  setTimeout(function() {
    $("#divSpinner").hide();
  }, 10000);
});