水平对齐 div答案

【问题标题】：Horizontally align div水平对齐 div
【发布时间】：2017-11-05 17:46:23
【问题描述】：

我无法在外部 div（“正在加载”的 id）内水平对齐旋转的圆圈动画（包含在 id 为“spin-panel”的 div 中），如下所示：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);
        }
      }
    }
  }

【问题讨论】：

添加#spin-panel位置：relative;
您是否取消选择我的答案作为解决方案？如果是这样，我很好奇为什么？

标签： html css sass alignment centering

【解决方案1】：

#spin-panel 居中，但子项是绝对定位的，并且有偏移其位置的边距。

将position: relative 添加到#spin-panel，并添加top: 0; left: 50%; transform: translateX(-50%); 并删除左边距以使它们水平居中。

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

【讨论】：