¿Qué hace auto en margin: 0 auto?

¿Qué hace auto en margin:0 auto; ?

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

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

Especificar auto como 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 es 100px y el hijo es 50px, entonces la propiedad auto determinará que hay 50px de espacio libre para compartir entre margin-left y margin-right :

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

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.

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

margin: 0 auto especifica

 * top and bottom margins are 0 * right and left margins are auto 

De la especificación de CSS sobre Cálculo de anchuras y márgenes para elementos de nivel de bloque, no reemplazados en flujo normal :

Si ambos ‘margin-left’ y ‘margin-right’ son ‘auto’, sus valores utilizados son iguales. Esto centra horizontalmente el elemento con respecto a los bordes del bloque contenedor.

 margin:0 auto; 

0 es para arriba-abajo y auto para izquierda-derecha. Significa que el margen izquierdo y derecho tomará 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:auto funciona perfectamente. Pero solo funciona en elementos de bloque.

 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.

Es un reemplazo roto / muy difícil de usar para la etiqueta “centro”. Resulta útil cuando necesita tablas rotas y un centrado no funcional para bloques y texto.