CSS - marginauto; - Cómo funciona

Utilizando margen: auto Centrar un elemento de bloque horizontalmente es una técnica bien conocida. Pero ¿alguna vez te has preguntado por qué o cómo funciona? Para responder a esto, primero debemos observar cómo funciona el margen: auto. También en la mezcla está lo que. auto posiblemente se puede hacer en los márgenes, si funciona para el centrado vertical, y algunos otros problemas.

Pero primero, Que hace auto en realidad hacer?

La definición de auto varía con elementos, tipos de elementos y contexto. En márgenes, auto puede significar una de dos cosas: ocupar el espacio disponible o 0 px. Estos dos voluntad Definir diferentes diseños para un elemento..

"auto" ocupando espacio disponible

Este es el uso más común del margen. auto nos encontramos a menudo. Asignando auto a los márgenes izquierdo y derecho de un elemento, ocupan el espacio horizontal disponible en el contenedor del elemento por igual, y así el elemento se centra.

Sin embargo, esto funcionará solo para márgenes horizontales (más en el por qué después), y también no trabajará con flotado y elementos en linea y por sí mismo, también no puede trabajar en absoluto y elementos posicionados fijos (Sin embargo veremos cómo hacer que funcionen)..

Flotador de Faux tomando espacio disponible

Ya que auto tanto en el margen derecho como en el izquierdo ocupan el espacio "disponible" por igual, ¿qué creen que sucederá cuando el valor auto Solo se da a uno de esos.?

Un margen izquierdo o derecho con auto ocupará todo el espacio "disponible" para que el elemento se vea como si se hubiera lavado a la derecha oa la izquierda.

“auto” Calculado a 0px

Como se mencionó anteriormente, auto No trabajará en elementos flotantes, en línea y absolutos. Todos estos elementos ya tienen. decidieron en sus diseños, así que no hay uso en usar auto para los márgenes y esperando que se centre al igual que.

Eso derrotará el propósito inicial de usar algo como flotador. Por lo tanto auto Tendrá un valor de 0px en esos elementos..

auto Tampoco funcionará en un elemento de bloque típico si no tiene un ancho. Todos los ejemplos que te mostré hasta ahora tienen anchos..

Un ancho de valor auto tendrá 0px márgenes. El ancho de un elemento de bloque normalmente cubre su contenedor cuando está auto o 100% y por lo tanto un margen auto se computará a 0px En ese caso.

Qué sucede con los márgenes verticales con el valor auto?

auto tanto en el margen superior como en el inferior siempre se calcula a 0px (excepto para los elementos absolutos). La especificación W3C lo dice así:

“Si “margen superior” o “margen inferior” es “auto”, su valor utilizado es 0 "

El por qué, bueno, eso es hasta ahora, un misterio. Podría ser debido al flujo de página vertical típico, donde el tamaño de la página aumenta en altura. Por lo tanto, centrar un elemento verticalmente en su contenedor no lo hará aparecer centrado, en relación con la página en sí, a diferencia de cuando se hace horizontalmente (en la mayoría de los casos).

Y tal vez por este mismo motivo, decidieron agregar una excepción para los elementos absolutos que pueden centrarse verticalmente a lo largo de la altura de toda la página..

También podría ser debido al efecto colapso del margen (un colapso de elementos adyacentes” márgenes) que es otra excepción para los márgenes verticales.

Sin embargo, este último parece ser un caso poco probable, ya que los elementos que no colapsan sus márgenes, como Flotadores y elementos con rebosar otro que visible, aún así asignar 0px márgenes verticales para auto.

Centrado de elementos absolutamente posicionados

Dado que sucede que hay una excepción para los elementos posicionados absolutamente, nosotros”usaré auto Valor para centrar uno vertical y horizontalmente. Pero antes de eso, tenemos que averiguar cuándo será margen: auto en realidad funciona como queremos en un elemento absolutamente posicionado.

Aquí es donde entra otra especificación de W3C:

"Si los tres de “izquierda”, “anchura”, y “Correcto” son “auto”: Primero establece cualquier “auto” valores para “margen izquierdo” y “margen derecho” a 0 ... "

"Si ninguno de los tres es “auto”: Si ambos “margen izquierdo” y “margen derecho” son “auto”, resuelva la ecuación bajo la restricción adicional de que los dos márgenes obtienen valores iguales "

Eso dice mucho para horizontal auto márgenes Para aprovechar espacios iguales, el valores para izquierda, anchura y Correcto no debería ser auto , su valor por defecto. Así que todo lo que tenemos que hacer es darles algo de valor en un elemento absolutamente posicionado. izquierda y Correcto debería tener iguales valores para un centrado perfecto.

La especificación también menciona algo similar para márgenes verticales..

“Si los tres de “parte superior”, “altura”, y “fondo” son automáticos, establecidos “parte superior” a la posición estática ... ”

“Si ninguno de los tres son “auto”: Si ambos “margen superior” y “margen inferior” son “auto”, resuelva la ecuación bajo la restricción adicional de que los dos márgenes obtienen valores iguales ... ”

Por lo tanto, para que un elemento absoluto sea centrado verticalmente, sus parte superior, altura, y fondo los valores no deberían ser auto.

Ahora, combinando todo esto, esto es lo que nosotros”obtendrá:

Conclusión

Si alguna vez desea vaciar un elemento de su página hacia la derecha o hacia la izquierda sin los siguientes elementos que lo envuelven (como lo que sucede con flotar), recuerde que existe la opción de usar auto por márgenes.

Convertir un elemento en absoluto para que pueda centrarse verticalmente puede no ser una gran idea. Hay otras opciones como flexbox y CSS transform que son más adecuadas para aquellos.