css - 垂直居中加载微调器覆盖

Question

我想展示一个垂直居中的加载微调器，就像其中一个 https://github.com/jlong/css-spinners在网页中。按照该页面上的 codepen.io 链接查看它们的动态。

我如何通过 CSS 做到这一点？假设我正在处理基于 Python、Twitter Bootstrap 和 Polymer 的 Google App Engine 应用程序。

Answer 1

假设您使用“加号”微调器。您可以将其包装在覆盖整个页面的固定位置 div 中:

<div id="pluswrap">
  <div class="plus">
    Loading...
  </div>
</div>

由于您有时可能想使用具有不同宽度的不同微调器，因此 CSS 不应对宽度进行硬编码。您可以在 flexbox 中垂直居中一个元素，然后在要水平居中的元素上使用 margin: 0 auto;。

#pluswrap {
  position: fixed;
  width: 100%;
  height:100%;
  display: flex;
  align-items: center;
  top: 0;
}

.plus {
  display: flex;
  margin: 0 auto;
}

这样，您甚至可以为背景着色，使其半透明等。

这是一个 JSFiddle