我想展示一个垂直居中的加载微调器,就像其中一个 https://github.com/jlong/css-spinners在网页中。按照该页面上的 codepen.io 链接查看它们的动态。
我如何通过 CSS 做到这一点?假设我正在处理基于 Python、Twitter Bootstrap 和 Polymer 的 Google App Engine 应用程序。
最佳答案
假设您使用“加号”微调器。您可以将其包装在覆盖整个页面的固定位置 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
关于css - 垂直居中加载微调器覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26451948/