Comment centrer un SVG dans une div?

Question

J'ai un SVG que j'essaie de centrer dans une div. La div a une largeur de 900px. Le SVG a une largeur de 400px. Le SVG a sa marge-gauche et sa marge-droite définies sur auto. Ne fonctionne pas, il se comporte juste comme si la marge gauche était à 0 (par défaut).

Est-ce que quelqu'un sait quelle est l'erreur ?

Answer 1

SVG est en ligne par défaut.

Ajoutez display: block et alors margin: auto fonctionnera comme prévu.

Ou selon votre mise en page, vous pouvez vouloir garder le SVG en ligne et définir text-align: center sur un élément parent à la place.

Comme autre alternative, vous pouvez centrer le SVG en utilisant des mises en page flex ou grid sur l'élément parent.

Answer 2

Les réponses précédentes n'ont pas fonctionné pour moi. Ajouter l'attribut preserveAspectRatio="xMidYMin" à la balise a quand même fonctionné. L'attribut viewBox doit également être spécifié pour que cela fonctionne. Source : Réseau de développeurs Mozilla

Answer 3

Ayant lu ci-dessus que le svg est inline par défaut, j'ai simplement ajouté ce qui suit à la div:

et ça a fonctionné pour moi.

Les puristes pourraient ne pas aimer (c'est une image, pas du texte) mais à mon avis HTML et CSS se trompent en matière de centrage, donc je pense que c'est justifié.

Answer 4

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

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

Answer 5

Assurez-vous que votre css lit:

margin: 0 auto;

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