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

Question

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

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

这是我的标记:

<!DOCTYPE html>
<html>

  ...

  <body>

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

    ...

  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是我的样式表:

.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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jos*_*ier 22

由于元素具有固定的宽度8em,您可以使用以下方法添加left: 50%然后替换元素宽度的一半margin-left: -4px:

更新的示例

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

Run Code Online (Sandbox Code Playgroud)

如果元素的尺寸不是固定的并且事先已知,请参阅我的其他答案以了解替代选项.

@Nano - 当OP最初发布这个问题时，他们没有发布所有代码，因此它一开始就没有旋转。他们只是问这个关于居中问题的问题。我更新了我的答案以包含旋转/旋转动画。希望对您有帮助！ (2认同)

归档时间：	11 年，5 月前
查看次数：	28514 次
最近记录：	9 年，1 月前