Comment centrer un SVG dans une div?

J'ai un SVG que j'essaye de centrer dans un div. Le div a une largeur ou 900px. Le SVG a une largeur de 400 pixels. Le SVG a sa marge gauche et sa marge droite réglées sur auto. Ne fonctionne pas, il agit simplement comme si la marge gauche est 0 (par défaut).

Quelqu'un connaît mon erreur?

SVG est en ligne par défaut. Ajoutez- display: blocky et puis margin: autofonctionnera comme prévu.

Les réponses ci-dessus n'ont pas fonctionné pour moi. L'ajout de l'attribut preserveAspectRatio="xMidYMin"à la <svg>balise a cependant fait l'affaire. L' viewBoxattribut doit être spécifié pour que cela fonctionne également. Source: réseau de développeurs Mozilla

Après avoir lu ci-dessus que svg est en ligne par défaut, je viens d'ajouter ce qui suit à la div:

<div style="text-align:center;">

et ça a fait l'affaire pour moi.

Les puristes peuvent ne pas l'aimer (c'est une image, pas du texte) mais à mon avis HTML et CSS ont foiré le centrage, donc je pense que c'est justifié.

Aucune de ces réponses n'a fonctionné pour moi. Voilà comment je l'ai fait.

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

Les réponses ci-dessus semblent incomplètes car elles ne parlent que du point de vue CSS.

le positionnement du svg dans la fenêtre est affecté par deux attributs svg

1. viewBox: définit la zone rectangulaire pour le svg à couvrir.
2. preserveAspectRatio: a défini où placer la fenêtre d'affichage de la viewBox et comment l'étirer si la fenêtre change.

Suivez ce lien de codepen pour une description détaillée

<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">

Je devais utiliser

display: inline-block;

assurez-vous que votre css lit:

margin: 0 auto;

Même si vous dites que la gauche et la droite sont définies sur auto, vous pouvez placer une erreur. Bien sûr, nous ne le saurions pas car vous ne nous avez montré aucun code.

Vous pouvez également le faire:

<center>
<div style="width: 40px; height: 40px;">
    <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
        <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
            <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
                <path
                    d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
                    />
            </svg>
        </use>
    </svg>
</div>
</center>

Mettez votre code entre ceci divsi vous utilisez le bootstrap :

  <div class="text-center ">
  <i class="fa fa-twitter" style="font-size:36px "></i>
  <i class="fa fa-pinterest" style="font-size:36px"></i>
  <i class="fa fa-dribbble" style="font-size:36px"></i>
  <i class="fa fa-instagram" style="font-size:36px"></i>
  </div>

Flexbox est une autre approche: ajouter .container { display: flex; justify-content: center; }et ajouter la .containerclasse à la div qui contient votre svg.

Pour moi, le correctif consistait à ajouter margin: 0 auto;sur l'élément contenant le<svg> .

Comme ça:

<div style="margin: 0 auto">
   <svg ...</svg>
</div>