센터 오른쪽 정렬 된 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; 
}