中心右对齐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; 
}