Question

我想在屏幕中央放置一个加载CSS，并且希望它既可以移动也可以在桌面上工作。目前，我的CSS是这样的：

.spinner {
  width: 100px;
  height: 100px;
  position:absolute;
  top: 50%;
  left: 50%;
  margin: 100px auto;
  z-index:99999;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
  z-index:99999;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
  z-index:99999;
}

This is what I currently have

您可以看到它并不完全居中，而且我不知道该如何实现。微调框div在我的application.html.erb中，位于body标记内，位于yield上方。

如何将其居中放置在网页的确切中心，包括sidenav和navbar？

Answer 1

您可以在.spinner内使用以下CSS：

transform: translate(calc(-50%), calc(-50%));
position: fixed; /* if absolute doesn't work */
margin: 0; /* no need of margin */

Answer 2

所以修复很容易...我只是将下面的代码添加到CSS的.spinner类中。

transform: translate(calc(-50%), calc(-50%));
position: fixed;

我唯一仍然有问题的是旋转器太低了。我认为将top: 50%更改为top: 40%可能会解决问题。

整个页面的中心加载CSS

2 个答案: