¿Qué hace auto en margen: 0 auto?

126

¿Qué hace autoen margin:0 auto;?

Parece que no puedo entender lo que autohace. Sé que a veces tiene el efecto de centrar objetos. Gracias.

css Jitendra Vyas
fuente

Respuestas:

189

Cuando haya especificado un widthen el objeto al que se ha aplicado margin: 0 auto, el objeto se ubicará centralmente dentro de su contenedor principal.

Especificar autocomo el segundo parámetro básicamente le dice al navegador que determine automáticamente los márgenes izquierdo y derecho, lo que hace al configurarlos por igual. Garantiza que los márgenes izquierdo y derecho se establecerán en el mismo tamaño. El primer parámetro 0 indica que los márgenes superior e inferior se establecerán en 0.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

Por lo tanto, para darle un ejemplo , si el padre tiene 100 px y el hijo 50 px, entonces la autopropiedad determinará que hay 50 px de espacio libre para compartir margin-lefty margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Lo que daría: 

margin-left:25;
margin-right:25;

Echa un vistazo a este jsFiddle . No tiene que especificar el ancho principal, solo el ancho del objeto secundario.

djdd87
fuente
pero nunca definimos ningún ancho a bodyy siempre damos widthy margin:0 autoa#wrapper
Jitendra Vyas
ok, entonces el margen entre el cuerpo y el objeto será calculado automáticamente por el navegador.
Jitendra Vyas
¿Hay algún valor similar en %? Quiero decir, ¿hay alguna otra propiedad en css que pueda dar el mismo resultado como izquierda y derecha?auto
Jitendra Vyas
@GenericTypeTea, ¿y qué sucede en margin:auto 0condiciones?
Jitendra Vyas
Sin embargo, ¿por qué cuando uso margin: 20 auto parece que eso afecta la posición izquierda-derecha? Parece que todo lo que hice fue agregar un margen superior / inferior ...
pitosalas
13

auto: el navegador establece el margen. El resultado de esto depende del navegador

margen: 0 auto especifica

* top and bottom margins are 0
* right and left margins are auto
espinilla
fuente
9

De la especificación CSS sobre el cálculo de anchos y márgenes para elementos de nivel de bloque no reemplazados en flujo normal :

Si tanto 'margin-left' como 'margin-right' son 'auto', sus valores utilizados son iguales. Esto centra horizontalmente el elemento con respecto a los bordes del bloque contenedor.

Gumbo
fuente
"sus valores utilizados son iguales" ¿cuál es el medio de esto?
Jitendra Vyas
3
@ metal-gear-solid: si el ancho de los padres (determinado por el navegador o por el ancho especificado) es de 100 px y el ancho de su div hijo es de 50 px. Luego margen: 0 automático determinará que hay 50 px de espacio disponible. Luego dividirá eso entre 2, dando 25. El margen izquierdo y el derecho se establecen en 25, es decir, los valores se establecen por igual.
djdd87
1
Los valores usados ​​se refieren a los valores realmente usados ​​dependiendo de las propiedades visuales reales del elemento que usa esta propiedad y su bloque contenedor. La sección vinculada tiene una fórmula que se utiliza para calcular la diferencia horizontal entre un elemento y su bloque contenedor. Esa diferencia se divide por igual y se usa como los valores reales del margen horizontal.
Gumbo
6 
margin:0 auto;

0es para arriba-abajo y autopara izquierda-derecha. Significa que el margen izquierdo y derecho tomarán el margen automático de acuerdo con el ancho del elemento y el ancho del contenedor.

En general, si desea poner cualquier elemento en la posición central, entonces margin:autofunciona perfectamente. Pero solo funciona en elementos de bloque.

usuario3237573
fuente
1 
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0 es para arriba-abajo y automático para izquierda-derecha. El navegador establece el margen.

Jaffer Sathick
fuente
1

Se vuelve más claro con alguna explicación de cómo funcionan los dos valores.

La propiedad de margen es la abreviatura de:

margin-top
margin-right
margin-bottom
margin-left

Entonces, ¿cómo es que solo dos valores?

Bueno, puede expresar el margen con cuatro valores como este:

margin: 10px, 20px, 15px, 5px;

lo que significaría 10 px arriba, 20 px derecha, 15 px abajo, 5 px izquierda

Del mismo modo, también puede expresarse con dos valores como este:

margin: 20px 10px;

Esto le daría un margen de 20 píxeles superior e inferior y 10 píxeles a izquierda y derecha.

Y si configuras:

margin: 20px auto;

Entonces eso significa margen superior e inferior de 20px y margen izquierdo y derecho de auto. Y automático significa que el margen izquierdo / derecho se establece automáticamente en función del contenedor. Si su elemento es un elemento de tipo bloque, lo que significa que es un cuadro y ocupa todo el ancho de la vista, establece automáticamente el margen izquierdo y derecho de la misma manera y, por lo tanto, el elemento está centrado.

Angus Comber
fuente
-3

Es un reemplazo roto / muy difícil de usar para la etiqueta "centro". Es útil cuando necesita tablas rotas y centrado que no funciona para bloques y texto.

Danny
fuente