CSS - margen: automático - Cómo funciona

Usar margin:auto para 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 tenemos que echar un vistazo a cómo funciona el margen: automático. También en la mezcla está lo que el auto puede hacer en los márgenes, si funciona para el centrado vertical, y algunos otros problemas.

Pero primero, ¿qué hace auto realmente?

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

"automático" ocupando espacio disponible

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

Sin embargo, esto solo funcionará para los márgenes horizontales (más sobre el porqué más adelante), y tampoco funcionará con los elementos flotantes y en línea y, por sí mismo, tampoco funcionará en los elementos posicionados absolutos y fijos (sin embargo, veremos cómo hacer que esos trabajen).

Faux Float tomando espacio disponible

Como el auto en los márgenes derecho e izquierdo ocupa el espacio "disponible" por igual, ¿qué crees que pasará cuando el valor auto se otorgue a solo uno de esos?

Un margen izquierdo o derecho con auto ocupará todo el espacio "disponible", haciendo que el elemento se vea como si hubiera sido barrido hacia la derecha o hacia la izquierda.

"Auto" calculado a 0px

Como se mencionó anteriormente, auto no funcionará en elementos flotantes, en línea y absolutos. Todos estos elementos ya han decidido sus diseños, por lo que no tiene sentido utilizar los márgenes auto y esperar que se centren así.

Eso frustrará el propósito inicial de usar algo como float . 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 anchuras.

Un ancho de valor auto tendrá márgenes de 0px . El ancho de un elemento de bloque normalmente cubre el contenedor cuando es auto o 100% y, por lo tanto, un margen auto se calculará en 0px en tal caso.

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

auto en ambos márgenes superior e inferior siempre se calcula a 0px (excepto para elementos absolutos). La especificación W3C lo dice así:

"Si" margin-top "o" margin-bottom "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 página aumenta en altura . Por lo tanto, centrar un elemento verticalmente en su contenedor no lo hará parecer centrado, en relación con la página en sí, a diferencia de cuando se hace de forma horizontal (en la mayoría de los casos).

Y tal vez sea por esta misma razón, decidieron agregar una excepción para elementos absolutos que se pueden centrar verticalmente a lo largo de toda la página.

También podría deberse al efecto de colapso del margen (un colapso de los "márgenes" de los elementos adyacentes), 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 Flotantes, y los elementos con overflow no sean visible, aún asignan márgenes verticales de 0px para auto .

Centrar elementos absolutamente posicionados

Como sucede que hay una excepción para elementos absolutamente posicionados, usaremos el valor auto para centrar uno vertical y horizontalmente. Pero antes de eso, necesitamos saber cuándo funcionará el margin:auto realmente como queremos en un elemento absolutamente posicionado.

Aquí es donde entra otra especificación W3C:

"Si los tres de" izquierda ", " ancho "y" derecha "son" automáticos ": Primero configure los valores" automático "para" margen-izquierda "y" margen-derecho "en 0 ... "

"Si ninguno de los tres es" automático ": si tanto" margen-izquierda "como" margen-derecha "son" automáticos ", resuelva la ecuación bajo la restricción adicional de que los dos márgenes obtienen valores iguales"

Eso más o menos dice que para que los márgenes auto horizontales aprovechen espacios iguales, los valores de left, width y right no deberían ser auto, su valor predeterminado. Entonces, todo lo que tenemos que hacer es darles algo de valor en un elemento absolutamente posicionado. left y right deben tener valores iguales para un centrado perfecto .

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

"Si los tres de" arriba ", " altura "y" abajo "son automáticos, ajuste" arriba "a la posición estática ..."

"Si ninguno de los tres es" auto ": si ambos" margin-top "y" margin-bottom "son" auto ", resuelve 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 se centre verticalmente, sus valores top, height e bottom no deben ser auto .

Ahora combinando todo esto, esto es lo que obtendremos:

Conclusión

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

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

20 anuncios creativos que hacen que quieras esperar el ascensor

Los anuncios a través de los medios de comunicación y las pancartas se están volviendo demasiado comunes como para que las personas se hayan acostumbrado a ignorar estos anuncios y, en ocasiones, a evitarlos activamente . Se gasta tanto en publicidad que el hecho de no captar la atención de bypass es simplemente una pista de que la técnica utilizada no es lo suficientemente buena.Desd

(Consejos de tecnología y diseño)

200 atajos de teclado (Windows) para aumentar su productividad

Los atajos de teclado pueden aumentar su productividad si su trabajo diario depende en gran medida del uso de Windows. Simplemente no hacen el trabajo rápidamente, sino que también mejoran la eficiencia . Pruébalos y tal vez te vuelvas adicto a los atajos de teclado.Hemos compilado una lista de atajos de teclado para Windows 190 + accesos directos agrupados en categorías para facilitar el acceso. Si

(Consejos de tecnología y diseño)