我无法垂直对齐我的预加载器 svg。显示在屏幕高度的 50% 以下。深色边框代表屏幕的 50%,因此仅用于演示目的。
感谢任何帮助。
body,
html {
height: 100%;
}
.demo-square1 {
height: 50%;
width: 100%;
border-bottom: 1px solid #333333;
box-sizing: border-box;
position: absolute;
top: 0;
}
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: inline-block;
left: 50%;
position: absolute;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
.preloader svg {
-webkit-animation: inner 1320ms linear infinite;
animation: inner 1320ms linear infinite;
}
.preloader svg circle {
fill: none;
stroke: #448AFF;
stroke-linecap: square;
-webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}
@-webkit-keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@-webkit-keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
@keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
<div class="preloader-box">
<div class="preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="35" width="35" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="8"/></svg></div>
</div>
<div class="demo-square1"></div>
最佳答案
Keyframes outer
的 transform 属性覆盖了 .preloader
的 transform 属性,你可以使用 top: calc(50% - 17px);
或 transform: rotate(360deg) translate(-50%, -50%);
。
body,
html {
height: 100%;
}
.demo-square1 {
height: 50%;
width: 100%;
border-bottom: 1px solid #333333;
box-sizing: border-box;
position: absolute;
top: 0;
}
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: inline-block;
left: 50%;
position: absolute;
top: calc(50% - 17px);
bottom: 50%;
transform: translate(-50%, -50%);
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
.preloader svg {
-webkit-animation: inner 1320ms linear infinite;
animation: inner 1320ms linear infinite;
}
.preloader svg circle {
fill: none;
stroke: #448AFF;
stroke-linecap: square;
-webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}
@-webkit-keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@-webkit-keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
@keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
<div class="preloader-box">
<div class="preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="35" width="35" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="8"/></svg></div>
</div>
<div class="demo-square1"></div>
关于html - 预加载器 svg 垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44454912/