Question

我需要一些CSS帮助，我有一个用于加载页面的微调器，完全居中，它是垂直居中的，但是现在我怎样才能将旋转器放在所有可能的屏幕宽度中心？

这是我的标记：

<!DOCTYPE html>
<html>

  ...

  <body>

    <div class="loading">
      <div class="loader"></div>
    </div>

    ...

  </body>
</html>

这是我的样式表：

.loading {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999999999;
  overflow: hidden;
  background: #fff;
}
.loader {
  font-size: 10px;
  border-top: .8em solid rgba(218, 219, 223, 1);
  border-right: .8em solid rgba(218, 219, 223, 1);
  border-bottom: .8em solid rgba(218, 219, 223, 1);
  border-left: .8em solid rgba(58, 166, 165, 1);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
  display: block;
    position: absolute;
    top: 50%;
    margin-top: -4.05em;
}

Answer 1

由于元素的宽度为8em，因此您可以添加left: 50%，然后使用margin-left: -4px替换元素宽度的一半：

Updated Example

.loader {
  left: 50%;
  margin-left: -4em;
}

如果元素的尺寸未得到修复且事先已知，see my other answer for alternative options。

如何使用CSS将微调器设置到屏幕中间？

1 个答案: