¿Cómo centrar un div verticalmente?

Question

Tengo un div que quiero centrar horizontal y verticalmente.

Para el problema horizontal todo es genial, pero tengo un problema con la alineación vertical.

yo probamos este:

#parent { 
    display: table; 
} 

#child { 
    display: table-row; 
    vertical-align: middle; 
} 

pero esto no funciona.

Answer 1

Si solo tiene que admitir navegadores que admitan transform (o sus versiones prefijadas de proveedor), use este viejo y extraño truco para alinear elementos verticalmente.

#child { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Si tiene que soportar los navegadores más antiguos, se puede utilizar una combinación de éstos, sino que puede ser un dolor debido a las diferencias en la representación block vs table.

#parent { 
    display: table; 
} 

#child { 
    display: table-cell; 
    vertical-align: middle; 
} 

Si su altura es fija y que necesita para apoyar a los muy viejos, navegadores molestos ...

#parent { 
    position: relative; 
} 

#child { 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
} 

Si su altura no es fija, hay un workaround.

See it on jsFiddle.

Answer 2

En primer lugar, tratar el marcado no table como tablas (con display: tabla y amigos) no es un navegador cruzado. No sé qué navegadores necesitas admitir, pero ciertamente IE6 no hará esto. Pero, si su navegador de destino hacer todos soporte pantalla: tabla puedo darle algunos consejos.

El enfoque de centrado vertical que está buscando (usando el diseño de la tabla) depende de tener un TD con alineación vertical: centro, y luego dentro de ese elemento de bloque único se centrará verticalmente. Así que creo que lo que desea es:

#parent { display:table-cell; vertical-align:middle; } 
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ } 

Es aceptable utilizar table-cell sin table-row y mesa circundante, el navegador infiere los elementos necesarios mesa de embalaje para usted.

Answer 3

aquí es otra manera cuando no se conoce el tamaño div interior o lo que sea, puede usar% de aquí para allá para solucionar el "centrado" ....

la idea es que su valor es superior la mitad de la altura de su hijo como elemento para crear la ilusión de centrado

Aquí está el código:

<div id="parent"> 
    <div id="child"> 
      hello 
    </div> 
</div> 

y por el estilo:

#parent { 
    position: relative; 
    height: 300px; 
    width:200px; 
    background-color:green; 
} 

#child { 
    height: 50%; 
    width: 50%; 
    position:relative; 
    top:25%; 
    left:25%; 
    background-color:red; 
} 

Aquí se puede ver en acción http://jsfiddle.net/Wabxv/

Answer 4

que tiene la propiedad de los padres como, display:table y la propiedad niño como display: table-cell y vertical-align: middle trabajado para mí.