水平对齐的div

如图这里遇到麻烦的外层div内水平对齐纺丝圆动画（载带的“自旋面板” ID在div内）（的“加载” ID）

：https://codepen.io/depaolif/pen/MoYwrP 水平对齐的div

有没有人知道为什么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); 
     } 
     } 
    } 
    }

来源

2017-06-05 paoliff

添加在＃旋面板位置：相对; – PlayerWet

您是否已选择我的答案作为解决方案？如果是这样，我很好奇为什么？ –

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

来源

2017-06-05 02:06:29

水平对齐的div

回答

相关问题