垂直居中加载微调器叠加

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