HTML

Question

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

我怎么能通过CSS做到这一点？考虑我正在处理基于Python，Twitter Bootstrap和Polymer的Google App Engine应用程序。

Answer 1

让我们假设您使用＆＃34; Plus＆＃34;微调。您可以将它包装在覆盖整个页面的固定位置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

Answer 2

我对谷歌应用程序引擎一无所知，我担心但是将宽度和高度的元素居中很容易。

我认为这是一个固定的定位元素，所以只需使用顶部，右侧，左侧和底部，然后使用边距：自动垂直和水平居中。

e.g。

<!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>

Answer 3

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

垂直居中加载微调器叠加

3 个答案:

HTML

CSS