html - 如何将 4 个 absolute-divs(球)居中放置在我的屏幕中间？

Question

我正在尝试为我当前的作业创建一个加载屏幕效果。

它需要我们创建一个<div class="overlay">与 position: fixed .以此资金为背景。使用这个 div，有 4 个 <div class="circle">与 position: absolute .

我们必须使用绝对位置和 transform: translate 将它们居中.每个球的边距为 80px在他们中间

这是我尝试重新创建的示例图片

到目前为止，我已经设法将球完美居中，但由于 position: absolute它们都重叠。我怎样才能确保我能得到图中所示的所有 4 个球？

html {
  scroll-behavior: smooth;
}

body {
  z-index: 0;
  background-color: #fff;
}

.overlay {
  background-color: #0d1133;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100vh;
  width: 100vw;
}

.circle {
  width: 80px;
  height: 80px;
  background: #fff;
  display: inline-block;
  border-radius: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#yellow {
  background-color: linear-gradient(180deg, rgba(248, 255, 0, 1) 0%, rgba(255, 145, 0, 1) 50%, rgba(255, 145, 0, 1) 100%);
}

#red {
  background: linear-gradient(180deg, rgba(255, 0, 215, 1) 0%, rgba(255, 0, 61, 1) 50%, rgba(255, 0, 0, 1) 100%);
}

#blue {
  background: linear-gradient(180deg, rgba(0, 255, 243, 1) 0%, rgba(0, 224, 255, 1) 50%, rgba(0, 185, 255, 1) 100%);
}

#purple {
  background: linear-gradient(180deg, rgba(255, 0, 241, 1) 0%, rgba(222, 0, 255, 1) 50%, rgba(157, 0, 255, 1) 100%);
}

<main>

  <div class="overlay">
    <div class="circle" id="yellow"></div>
    <div class="circle" id="red"></div>
    <div class="circle" id="blue"> </div>
    <div class="circle" id="purple"></div>
  </div>

</main>

Answer 1

您可以将它们包装在 wrapper 类中并将 div 绝对定位(就像您对每个球所做的那样)。

html {
  scroll-behavior: smooth;
}

body {
  z-index: 0;
  background-color: #fff;
}

.overlay {
  background-color: #0d1133;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100vh;
  width: 100vw;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.circle {
  width: 80px;
  height: 80px;
  background: #fff;
  display: inline-block;
  border-radius: 40px;
}

#yellow {
  background-color: linear-gradient(180deg, rgba(248, 255, 0, 1) 0%, rgba(255, 145, 0, 1) 50%, rgba(255, 145, 0, 1) 100%);
}

#red {
  background: linear-gradient(180deg, rgba(255, 0, 215, 1) 0%, rgba(255, 0, 61, 1) 50%, rgba(255, 0, 0, 1) 100%);
}

#blue {
  background: linear-gradient(180deg, rgba(0, 255, 243, 1) 0%, rgba(0, 224, 255, 1) 50%, rgba(0, 185, 255, 1) 100%);
}

#purple {
  background: linear-gradient(180deg, rgba(255, 0, 241, 1) 0%, rgba(222, 0, 255, 1) 50%, rgba(157, 0, 255, 1) 100%);
}

<main>

  <div class="overlay">
    <div class="wrapper">
      <div class="circle" id="yellow"></div>
      <div class="circle" id="red"></div>
      <div class="circle" id="blue"> </div>
      <div class="circle" id="purple"></div>
    </div>
  </div>

</main>