css - con - ¿Cómo centro un SVG en un div?

svg web

Question

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?

Answer 1

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.

Answer 2

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

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

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.

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

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>

Answer 7

Tuve que usar

display: inline-block;

Answer 8

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