¿Por qué el atributo automático para el margen no funciona verticalmente mientras funciona horizontalmente?

Question

He visto que al desarrollar sitios web, centrar verticalmente un contenedor (de altura fija) dentro de un contenedor de altura aleatoria siempre viene como una pesadilla para el desarrollador web (al menos, yo) mientras que se trata de centrar horizontalmente un contenedor (de ancho fijo) dentro de un contenedor de ancho aleatorio, el margin:0px auto; tiende a servir una salida fácil en el modelo estándar.

Cuando las cosas pueden ser tan simples como eso, ¿por qué CSS no funciona con el margin:auto 0px; cuando se trata de centrar un contenedor de altura fija dentro de un contenedor de altura aleatoria? ¿Hay alguna razón específica para hacerlo? Gracias por sus ideas de antemano.

Answer 1

Es realmente menos de una pesadilla de lo que piensas, simplemente no uses márgenes. vertical-align es realmente lo que debe confiar para el centrado vertical de altura de fluido. Tiré juntos una demostración rápida para demostrar mi punto:

HTML:

<span></span><div id="any-height"></div> 

CSS:

* { margin: 0; padding: 0; } 
html, body { 
    height: 100%; 
    text-align: center; } 
span { 
    height: 100%; 
    vertical-align: middle; 
    display: inline-block; } 
#any-height { 
    background: #000; 
    text-align: left; 
    width: 200px; 
    height: 200px; 
    vertical-align: middle; 
    display: inline-block; } 

Ver: http://jsfiddle.net/Wexcode/jLXMS/

Answer 2

La respuesta correcta para su pregunta es que margin: auto 0 doesn No funciona de la misma manera que margin: 0 auto funciona porque width: auto no funciona de la misma manera height: auto do es.

Margen automático vertical funciona para elementos absolutamente posicionados con una altura conocida.

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    width: 150px; 
    height: 150px; 
    margin: auto; 
} 

Answer 3

css ----------------

.aligncenter{ 
     display: -webkit-box; 
     display: -moz-box; 
     display: box; 
     -webkit-box-align: center; 
     -moz-box-align: center; 
     flex-align: center; 
     -webkit-box-pack: center; 
     -moz-box-pack: center; 
     flex-pack: center; 
} 

html ------------------ -------

<div class="aligncenter">

---your content appear at the middle of the parent div----

</div>

nota ----------- este trabajo clase CSS con casi todos los navegadores