Question

我无法在外部div中水平对齐旋转圆圈动画（包含在ID为＆＃34;旋转面板＆＃34;的div中）（ID为＆＃34; loading＆＃34; ）如下所示：https://codepen.io/depaolif/pen/MoYwrP

有谁知道为什么margin: auto在这种情况下不会像通常那样工作？

HTML：

<div id="loading">
    Loading account info
    <div id="spin-panel">
      <span id="loading8-1">
            <span id="CircleBottom"><span class="ball"></span></span>
      </span>
      <span id="loading8-2">
            <span id="CircleMiddle"><span class="ball"></span></span>
      </span>
      <span id="loading8-3">
            <span id="CircleTop"><span class="ball"></span></span>
      </span>
    </div>
</div>

SCSS：

@keyframes cwSpin {
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

#loading {
  text-align: center;
  margin-top: 40vh;
  font-size: 40px;
  width: 100vw;

  #spin-panel {
    width: 50%; // this doesn't make a difference
    margin: 0 auto;

    #loading8-1, #loading8-2, #loading8-3 {
      display:block;
      position:absolute;
      margin:30px 0 0 100px;
      width:80px;
      height:80px;
      animation: cwSpin 1s linear 0s infinite;


        #CircleBottom, #CircleMiddle, #CircleTop {
          display:block;
          position:absolute;

          width:100px;
          height:100px;

          border-radius:100px;

          .ball {
            width:20px;
            height:20px;
            display:block;
            position:absolute;
            background-color:#06C;
            border-radius:20px;
            margin:0 0 0 45px;
          }
        }

        #CircleBottom {
          transform:rotate(0deg);
        }
        #CircleMiddle {
          transform:rotate(50deg);
        }
        #CircleTop {
          transform:rotate(100deg);
        }
      }
    }
  }

Answer 1

#spin-panel居中，但是孩子们处于绝对位置并且边缘抵消了他们的位置。

将position: relative添加到#spin-panel，并向正在旋转的子项添加top: 0; left: 50%; transform: translateX(-50%);并删除左边距以使其水平居中。

＆＃13;

@keyframes cwSpin {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
#loading {
  text-align: center;
  margin-top: 40vh;
  font-size: 40px;
  width: 100vw;
}
#loading #spin-panel {
  width: 50%;
  margin: 1em auto 0;
  position: relative;
}
#loading #spin-panel #loading8-1, #loading #spin-panel #loading8-2, #loading #spin-panel #loading8-3 {
  display: block;
  position: absolute;
  margin: 0 0 0 0;
  width: 80px;
  height: 80px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#loading #spin-panel #loading8-1 #CircleBottom, #loading #spin-panel #loading8-1 #CircleMiddle, #loading #spin-panel #loading8-1 #CircleTop, #loading #spin-panel #loading8-2 #CircleBottom, #loading #spin-panel #loading8-2 #CircleMiddle, #loading #spin-panel #loading8-2 #CircleTop, #loading #spin-panel #loading8-3 #CircleBottom, #loading #spin-panel #loading8-3 #CircleMiddle, #loading #spin-panel #loading8-3 #CircleTop {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100px;
}
#loading #spin-panel #loading8-1 #CircleBottom .ball, #loading #spin-panel #loading8-1 #CircleMiddle .ball, #loading #spin-panel #loading8-1 #CircleTop .ball, #loading #spin-panel #loading8-2 #CircleBottom .ball, #loading #spin-panel #loading8-2 #CircleMiddle .ball, #loading #spin-panel #loading8-2 #CircleTop .ball, #loading #spin-panel #loading8-3 #CircleBottom .ball, #loading #spin-panel #loading8-3 #CircleMiddle .ball, #loading #spin-panel #loading8-3 #CircleTop .ball {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  background-color: #06C;
  border-radius: 20px;
  margin: 0 0 0 45px;
}
#loading #spin-panel #loading8-1 #CircleBottom, #loading #spin-panel #loading8-2 #CircleBottom, #loading #spin-panel #loading8-3 #CircleBottom {
  transform: rotate(0deg);
}
#loading #spin-panel #loading8-1 #CircleMiddle, #loading #spin-panel #loading8-2 #CircleMiddle, #loading #spin-panel #loading8-3 #CircleMiddle {
  transform: rotate(50deg);
}
#loading #spin-panel #loading8-1 #CircleTop, #loading #spin-panel #loading8-2 #CircleTop, #loading #spin-panel #loading8-3 #CircleTop {
  transform: rotate(100deg);
}
#loading #spin-panel #loading8-1, #loading #spin-panel #loading8-2, #loading #spin-panel #loading8-3 {
  animation: cwSpin 1s linear 0s infinite;
}

＆＃13;

<div id="loading">
  Loading account info
  <div id="spin-panel">
    <span id="loading8-1">
                <span id="CircleBottom"><span class="ball"></span></span>
    </span>
    <span id="loading8-2">
                <span id="CircleMiddle"><span class="ball"></span></span>
    </span>
    <span id="loading8-3">
                <span id="CircleTop"><span class="ball"></span></span>
    </span>
  </div>
</div>

＆＃13;

水平对齐div

1 个答案: