Css 垂直居中加载微调器覆盖

我想展示一个垂直居中的加载微调器，就像网页中的其中一个。按照该页面上的codepen.io链接查看它们的运动

---

如何通过CSS实现这一点？考虑一下我正在处理一个基于Python、推特Bootstrap和Pooor的谷歌应用引擎应用程序。

< P>我不知道谷歌应用引擎的任何内容，但是我担心的是一个宽度和高度很容易的元素。 我假设这是一个固定位置的元素，所以只需使用顶部、右侧、左侧和底部，然后使用margin:auto垂直和水平居中

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

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

e、 g

无标题文件
斯宾纳先生{
位置：固定；
z索引：99；/*使其高于页面上的任何内容*/
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
背景：红色；
宽度：100px；
高度：100px；
}

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

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

这样，你甚至可以给背景上色，使其半透明等等

这里有一个

HTML 只有

display:flex

到父级和

margin:auto

将执行所需操作

---

这是

谢谢，它很有效。它也垂直居中，但不是水平居中：（我看不出为什么用固定位置的flexbox包装。我看不出为什么它不应该水平居中。你能分享代码或页面来帮助找出问题吗？对齐内容：居中；！你可以通过使用水平居中对齐布局以聚合物的方式进行attributes@GeorgeKormaris...您使用了一些非必需的属性，…se请在下面输入我的答案，以了解您答案的变化

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

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

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

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

.plus {
  margin: auto;
}