html - style - margin left css

¿Por qué el "margen: automático" no centra un elemento verticalmente?

Question

Como puede ver en la demostración a continuación, margin: auto; centra el div azul horizontalmente, pero no verticalmente. Por qué no?

.box {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
.center {
  background: blue;
  width: 50px;
  height: 50px;
  margin: auto;
}

<div class="box">
  <div class="center"></div>
</div>

Mi pregunta no está pidiendo soluciones.

Answer 1

¿Por qué no margin:auto trabajo margin:auto verticalmente?

En realidad, sí, simplemente no para cada valor de display .

Si la display es flex , margin: auto tanto vertical como horizontalmente.

Lo mismo se aplica a la display: inline-flex , display: grid y display: inline-grid .

.box {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  display: flex; /* new */
}
.center {
  background: blue;
  width: 50px;
  height: 50px;
  margin: auto;
}

<div class="box">
  <div class="center"></div>
</div>

Answer 2

Como se mencionó, este comportamiento se especifica en la sección 10.6.2 de CSS2.1 y no ha cambiado desde CSS2 .

Las cajas de bloques se apilan verticalmente de arriba a abajo en flujo normal. Además, los márgenes verticales pueden colapsar , y solo lo hacen bajo ciertas circunstancias (en su demostración, el borde del elemento padre impedirá que los márgenes en el elemento secundario colapsen con los propios). Si solo tiene una de esas casillas de bloque y la altura del bloque contenedor es automática, sus márgenes superior e inferior serán cero de todos modos. Pero si tiene más de un bloque de bloques en el mismo flujo, o incluso cajas de falta de flujo que afectan el diseño de los cuadros de flujo (en el caso del clearance por ejemplo), ¿cómo esperaría que los márgenes automáticos se resolvieran para aquellos cajas de flujo?

Esta es la razón por la que los márgenes automáticos izquierdo y derecho también se ponen a cero para los elementos en línea (incluidas las líneas atómicas) y los flotantes (aunque los márgenes horizontales nunca colapsan). Los cuadros de nivel en línea se colocan a lo largo de los recuadros de líneas , y los flotantes también obedecen reglas de diseño únicas .

Las cajas posicionadas de forma absoluta son una historia diferente: dado que nunca conocen otras cajas en el mismo contexto de posicionamiento que ellas mismas, se pueden calcular los márgenes superior e inferior automáticos con respecto a los bloques que las contienen sin tener que preocuparse por ninguna otra caja entrometido.

Flexbox también es una historia diferente: lo que diferencia al diseño flexible del diseño de bloques es que los elementos flexibles son, por definición, siempre conscientes de otros elementos flexibles en el mismo contexto de formato flexible, incluido el hecho de que no hay ninguno. En particular, tampoco se pueden introducir flotantes en el contenedor flexible, ni tampoco se pueden flotar elementos flexibles para subvertir esto (aunque aún se puede eliminar por completo un elemento hijo del diseño flexible con un posicionamiento absoluto ). Los márgenes se comportan de manera muy diferente con elementos flexibles debido en parte a esto. Ver secciones 4.2 , 9.5 y 9.6 .

Answer 3

Es debido a la posibilidad real de conocer la verdadera altura del elemento en el que desea centrar verticalmente. Para comprenderlo, primero piense cómo funciona el centrado automático en el automóvil. Tienes un div que le has dado un ancho (fijo o porcentual). El ancho se puede calcular en cierto grado. Si es ancho fijo, genial. Si es flexible o receptivo (porcentaje), al menos tiene un rango que abarcará el ancho antes de llegar al siguiente punto de interrupción. Toma ese ancho, menos lo que sea que esté adentro, y divide el resto en ambos lados.

Ahora, con esa información, ¿cómo podría el navegador calcular la cantidad infinita de variaciones en las que su div crecerá verticalmente? Tenga en cuenta que el tamaño del elemento, el ajuste del texto, los rellenos y la capacidad de respuesta también alterarán el ancho y forzarán al texto a que se envuelva más y más, y así sucesivamente.

¿Es una tarea imposible? En realidad, ¿CSS ha dedicado tiempo y esfuerzo para cubrir esto? No vale la pena su tiempo, supongo.

Y esa es básicamente la respuesta que les digo a mis alumnos.

Pero ... ¡no te preocupes! ¡Bootstrap v4 alpha ha descubierto el centrado vertical !

EDITAR

Lamento haber editado esta publicación tarde, pero pensé que es posible que desee considerar que estas soluciones se centren verticalmente y es bastante simple al usar la función calc.

<div class="foo"></div>

.foo {
  background-color: red;
  height: 6em;
  left: calc(50% - 3em);
  position: absolute;
  top: calc(50% - 3em);
  width: 6em;
}

Véalo HERE

Answer 4

No centra el elemento verticalmente porque es un elemento de nivel de bloque en el flujo normal. Por lo tanto, se aplica la siguiente regla :

Si margin-top , o margin-bottom son auto , su valor utilizado es 0.

También vale la pena señalar que la regla anterior también se aplica también a los siguientes elementos: (véanse los puntos 10.6.2 y 10.6.3 para obtener más información y condiciones).

• Elementos en línea reemplazados
• Elementos reemplazados a nivel de bloque en flujo normal
• elementos reemplazados en inline-block en flujo normal
• Elementos flotantes reemplazados
• Elementos no reemplazados a nivel de bloque en flujo normal cuando el overflow computa a visible

Dicho esto, los elementos absolutamente posicionados y no reemplazados que no tienen top valores top , height e bottom de auto son una excepción a esta regla. Lo siguiente aplica desde el punto 10.6.4 :

Si ninguno de los tres top , top e bottom son auto y si tanto margin-top como margin-bottom son auto , resuelva la ecuación bajo la restricción adicional de que los dos márgenes obtienen valores iguales .

Vea el ejemplo a continuación que demuestra cómo un elemento absolutamente posicionado se centra verticalmente usando margin: auto . Funciona porque ninguna de las tres propiedades top , height e bottom tiene un valor de auto :

.box {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  position: relative;
}
.center {
  background: blue;
  width: 50px;
  height: 50px;
  margin: auto;
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}

<div class="box">
  <div class="center"></div>
</div>

Además, probablemente valga la pena señalar la siguiente regla :

Si uno de margin-top o margin-bottom es auto , resuelve la ecuación para ese valor. Si los valores están excesivamente restringidos, ignore el valor de bottom y resuelva ese valor.

Esto significa que si el elemento absolutamente posicionado tiene un valor de margin-top de auto y un valor de margin-bottom de 0 (es decir, margin: auto auto 0 ), el elemento estaría absolutamente posicionado en la parte inferior en relación con el elemento parental en el ejemplo a continuación:

.box {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  position: relative;
}
.center {
  background: blue;
  width: 50px;
  height: 50px;
  margin: auto auto 0;
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}

<div class="box">
  <div class="center"></div>
</div>

Answer 5

Porque ... porque la especificación W3C lo dice.

Si ''margin-top'', o ''margin-bottom'' son ''auto'', su valor utilizado es 0.

En cuanto al "por qué" real ... la consulta realmente debería abordarse allí.