¿Cómo centro un SVG en un div?

Tengo un SVG que estoy tratando de centrar en un div. El div tiene un ancho o 900px. El SVG tiene un ancho de 400 px. El SVG tiene su margen izquierdo y margen derecho establecidos 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 de forma predeterminada. Agréguelo display: blocky luego margin: autofuncionará como se esperaba.

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

Habiendo leído anteriormente que svg está en línea por defecto, acabo de agregar lo siguiente al div:

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

y me sirvió.

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

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%);

Las respuestas anteriores parecen incompletas ya que solo hablan desde el punto de vista css.

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

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

Siga este enlace desde codepen para una descripción detallada

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

Tuve que usar

display: inline-block;

asegúrese de que su css lea:

margin: 0 auto;

Aunque esté diciendo que tiene los ajustes izquierdo y derecho en automático, puede estar colocando un error. Por supuesto, no lo sabríamos porque no nos mostró ningún código.

También puedes hacer esto:

<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>

Ponga su código entre esto divsi está usando 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 es otro enfoque: agregar .container { display: flex; justify-content: center; }y agregar la .containerclase al div que contiene su svg.

Para mí, la solución fue agregar margin: 0 auto;al elemento que contiene el<svg> .

Me gusta esto:

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