¿Cómo centro un SVG en un div?

Tengo un SVG que estoy tratando de 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 establecido en automático. No funciona, solo actúa como si el margen izquierdo fuera 0 (predeterminado).

Alguien sabe mi error?

SVG está en línea por defecto. Agregar display: block y luego margin: auto funcionará como se espera.

Las respuestas anteriores no funcionaron para mí. Sin preserveAspectRatio="xMidYMin" agregar el atributo preserveAspectRatio="xMidYMin" a la etiqueta hizo el truco. El atributo viewBox necesita ser especificado para que esto funcione también. Fuente: red de desarrolladores de Mozilla

Ninguna de estas respuestas funcionó para mí. Así es como lo hice.

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

Después de leer arriba que svg está en línea por defecto, acabo de agregar lo siguiente al div:

 

y funcionó el truco para mí.

Puede que a los puristas no les guste (es una imagen, no un texto) pero, en mi opinión, el HTML y el CSS se estropearon y se centraron, así que creo que está justificado.

Las respuestas de arriba se ven incompletas ya que solo están hablando desde el punto de vista de css.

el posicionamiento de svg dentro de la ventana gráfica se ve afectado por dos atributos svg

  1. viewBox: define el área del rectángulo para cubrir svg.
  2. preserveAspectRatio: definió dónde colocar la viewport wrt viewport y cómo estirarla si la ventana gráfica cambia.

Siga este enlace desde el codepen para una descripción detallada

  

Tuve que usar

 display: inline-block; 

Asegúrate de que tu css lea:

 margin: 0 auto; 

Aunque diga que tiene los ajustes de izquierda y derecha en automático, es posible que esté cometiendo un error. Por supuesto, no lo sabríamos porque no nos mostró ningún código.

También puedes hacer esto: