¿Cómo centro un SVG en un div?
Tengo un SVG que estoy intentando centrar en un div. El div tiene un ancho de 900px. El SVG tiene un ancho de 400px. El SVG tiene su margen izquierdo y margen derecho configurados en automático. No funciona, simplemente actúa como si el margen izquierdo fuera 0 (predeterminado).
¿Alguien sabe cuál es el error?
SVG está en línea de forma predeterminada.
Agréguelo display: blocky luego margin: autofuncionará como se esperaba.
O, dependiendo de su diseño, es posible que desee mantener SVG en línea y configurarlo text-align: centeren un elemento principal.
Como otra alternativa, puede centrar SVG usando diseños flexibles o de cuadrícula en el elemento principal.
Las respuestas anteriores no funcionaron para mí. Sin embargo , agregar el atributo preserveAspectRatio="xMidYMin"a la <svg>etiqueta funcionó. Es necesario especificar el viewBoxatributo para que esto también funcione. Fuente: red de desarrolladores de Mozilla
Habiendo leído arriba que svg está en línea de forma predeterminada, acabo de agregar lo siguiente al div:
<div style="text-align:center;">
y funcionó para mí.
Puede que a los puristas no les guste (es una imagen, no texto), pero en mi opinión HTML y CSS se equivocaron al centrar, así que creo que está justificado.
Flexbox es otro enfoque: agregar
.container {
display: flex;
justify-content: center;
}Y agregue la .containerclase al div que contiene su svg.