垂直居中加载旋转器覆盖层

Question

垂直居中加载旋转器覆盖层

csshtmltwitter-bootstrappolymer

8

我想在网页中展示一个垂直居中的加载动画，就像这些https://github.com/jlong/css-spinners之一。请访问该页面上的codepen.io链接以查看它们的动态效果。

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

- lowcoupling

3个回答

3

很抱歉，我不了解Google App Engine，但是居中一个具有宽度和高度的元素非常容易。

我假设这是一个固定定位的元素，因此只需使用top、right、left和bottom，然后使用margin:auto在垂直和水平方向上居中即可。

例如：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.spinner{
    position:fixed;
    z-index:99;/* make higher than whatever is on the page */
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    background:red;
    width:100px;
    height:100px;
}
</style>
</head>

<body>
<div class="spinner"></div>
</body>
</html>

- Paul O'B

1

HTML

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

CSS

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

.plus {
  margin: auto;
}

只需在父元素上添加display:flex，并设置margin: auto即可实现所需效果。

这里是JS Fiddle。

- Gags

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George Kormaris · Accepted Answer

假设你选择 “Plus” 旋转器。你可以将它包裹在一个固定位置的 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