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);
}
}
}
}
#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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.