水平对齐div

Question

I'm having trouble horizontally aligning the spinning circle animation (contained within the div with id of "spin-panel") within the outer div (id of "loading") as shown here: https://codepen.io/depaolif/pen/MoYwrP

Does anyone know why margin: auto wouldn't work in this case like it generally does?

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 is centered, but the children are absolutely positioned and have margins offsetting their position.

Add position: relative to #spin-panel , and to the children that are spinning, add top: 0; left: 50%; transform: translateX(-50%); top: 0; left: 50%; transform: translateX(-50%); and remove the left margins to center them horizontally.

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

 <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>