如何制作中心全屏加载程序

Question

我的加载器位置不在中间，请更改我的代码。 （抱歉我的英语不好哈哈）。好的高级设计师，这是我的代码。

.loader-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 100vw;
  height: 100vh;
  z-index: 9999999999;
}

，你能把这个放在中间位置吗？拜托，这是我的第一个项目呵呵:)

Answer 1

对于覆盖整个视口的容器，只需使用更短、更容易的

position: fixed; inset: 0;

。

要使装载机居中，请使用 Flexbox。

justify-content

沿主轴（弯曲方向）对齐子元素，

align-items

沿横轴

.loader {
  height: 4rem;
  width: 4rem;
  background-color: blue;
  border-radius: 50%;
}

.loader-container {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="loader-container">
  <div class="loader"></div>
</div>