プリローダsvg垂直整列問題

プリローダsvgを垂直に整列させることができません。画面の高さの50％より下に表示されます。暗い枠線は画面の50％を表しているため、デモ目的にのみ使用されます。プリローダsvg垂直整列問題

何か助けていただければ幸いです。

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>

出典

2017-06-09 Jacksonfive

'.preloader-box'に' position：relative'を追加してください。 – Morpheus

@Morpheusは動作しません。私のプロジェクトで – Jacksonfive

flexを使用して私の答えを確認してください – LKG

Keyframes outer年代.preloaderオーバーライドtransformプロパティを "sは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>

出典

2017-06-09 10:08:03

しかし、なぜ動作していませんか？私はこれまで、top：50％を使ってこの問題を抱えていませんでした。底部：50％; トランスフォーム：translate（-50％、-50％）; – Jacksonfive

'keyframes outer'のトランスフォームプロパティが' transform：translate（-50％、-50％）;をオーバーライドしました。アニメーションを削除すると、svgが途中にあります。 –

あなたは正しいです。適用する！変換することは重要です：翻訳（-50％、-50％）！重要;また動作します。 – Jacksonfive

あなたのCSSを更新し、同じ

はフィドルfiddle code

.preloader-box { 
    height: 100%; 
    left: 0; 
    top: 0; 
    width: 100%; 
    z-index: 999999; 
    display:flex; /* Add this */ 
    justify-content:center; /* Add this */ 
    align-items:center; /* Add this */ 
    flex-flow:column nowrap; /* Add this */ 
    position:relative; /* Add this */ 
} 

.preloader { 
    height: 35px; 
    width: 35px; 
    font-size: 0; 
    display: block; 
    position: absolute; /* Add this and remove top, bottom, left and transform */ 
    -webkit-animation: outer 6600ms linear infinite; 
      animation: outer 6600ms linear infinite; 
}

body, html { 
 
    height: 100%; 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 

 
.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; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    flex-flow:column nowrap; 
 
    position:relative; 
 
}  
 

 
.preloader { 
 
    height: 35px; 
 
    width: 35px; 
 
    font-size: 0; 
 
    display: block; 
 
    position: absolute; 
 
    -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"> 
 
\t \t <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> 
 
\t </div> 
 
    
 
    <div class="demo-square1"></div>

作業を取得するために flexを使用する必要があります

出典

2017-06-09 10:21:46 LKG

プリローダsvg垂直整列問題

答えて

関連する問題