Quelle est la meilleure façon de centrer un SVG horizontalement et verticalement à l'intérieur d'une balise div?

Question

Quelle est la meilleure façon de centrer un SVG horizontalement et verticalement un SVG dans une balise div?

Je sais que certaines façons sont meilleures que d'autres, mais pour cela quelle serait la meilleure façon de le faire?

<div style="width: 64px;height: 64px;background-color: rgba(0,0,0,.7);background-repeat: no-repeat;background-size: 24px;background-position: 58% 50%;border-radius: 500px;border: 1px solid blue;cursor: pointer;"> 
 
     
 
     <svg viewBox="-22 0 1229 1481" width="24" height="29" style="display:block;margin: 0 auto;background-color:green;"> 
 
     <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/> 
 
     </svg> 
 
     </div>

Answer 1

Si vous envisagez de fixer des positions fixes, la taille des pixels et vous-même des marges, juste ajuster la marge verticale svg.

<div style="width: 64px;height: 64px;background-color: rgba(0,0,0,.7);background-repeat: no-repeat;background-size: 24px;background-position: 58% 50%;border-radius: 500px;border: 1px solid blue;cursor: pointer;"> 
 
     
 
     <svg viewBox="-22 0 1229 1481" width="24" height="29" style="display:block;margin:16px auto;background-color:green;"> 
 
     <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/> 
 
     </svg> 
 
     </div>

Answer 2

utilisent ce style css pour votre élément SVG

margin: 0 auto; 
display: block; 

et ce pour l'élément DIV css

display: flex; 
align-items: center; 
height: 100%;