センターの右揃えのsvg要素

Question

私は水平方向にカスタムスクロールインジケータを中央に配置しようとしています。私は#slideDown divに集中したいと思います。私はスクロールインジケータを中央に近づけるが、正確に動かないこのコードを試した。

#slideDown{ 
display: flex; 
    justify-content: center; 

} 

ここに示したように、私が描いた画像は右揃えであるので、私は、問題が発生すると思う：

中央揃え、次のようにする必要があります：

どのようにこれを修正するための任意のアイデア？

Scroll indicator HTML 

    <div id="slideDown"> 
    <svg xmlns="http://www.w3.org/2000/svg" display="block" margin="auto" width="22" height="26" viewBox="-1 -1 22 26" class="arrows arrows-1"> 
      <g fill="none" fill-rule="evenodd" stroke="#666"> 
      <path d="M0 0l10 12L20 0" class="a1"></path> 
      <path d="M0 12l10 12 10-12" class="a2"></path> 
      </g> 
     </svg> 
    </div> 





Scroll indicator CSS: 
.arrows { 
    padding: 2em; 
    -webkit-animation-name: arrowsOpacity; 
      animation-name: arrowsOpacity; 
    -webkit-animation-duration: 3.5s; 
      animation-duration: 3.5s; 
    -webkit-animation-iteration-count: 1; 
      animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
      animation-timing-function: linear; 
} 

.arrows-1 path { 
    -webkit-animation-name: arrows-1-anim; 
      animation-name: arrows-1-anim; 
    -webkit-animation-duration: 2s; 
      animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
      animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
      animation-timing-function: linear; 
} 
.arrows-1 path.a1 { 
    -webkit-animation-delay: 0s; 
      animation-delay: 0s; 

} 
.arrows-1 path.a2 { 
    -webkit-animation-delay: 0.2s; 
      animation-delay: 0.2s; 
} 

@-webkit-keyframes arrowsOpacity { 
    0% { 
    opacity: 0; 
    } 
    30% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

@-webkit-keyframes arrows-1-anim { 
    0% { 
    opacity: 0; 
    } 
    30% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

@keyframes arrows-1-anim { 
    0% { 
    opacity: 0; 
    } 
    30% { 
    opacity: 0; 
    } 
    50% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 


#slideDown{ 
display: flex; 
    justify-content: center; 


} 

Answer 1

提供されたコードを貼り付けてJSfiddleを作成したときの問題がわかりません。正常に動作しているようです。それをチェックしてください：https://jsfiddle.net/8cvb8bw1/

おそらくあなたのフレックスボックスは、他の要素をラッピングしてレイアウトを破っていますか？あなたがコードの抜粋のみを提供したと言うのは難しいです。

#slideDown { 
    display: flex; 
    justify-content: center; 
}