Cómo alinear verticalmente div dentro de otro div sin pantalla: table-cell

Question

Ok esta es la estructura div.

<div class="DivParent"> 
    <a href="#"> 

    <div class="DivWhichNeedToBeVerticallyAligned"></div> 

    </a>  
    </div> 

DivParent ha fijado los valores de anchura y altura pero DivWhichNeedToBeVerticallyAligned no han fijado valores de altura.

Si realiza la visualización DivParent: table-cell; puedes alinear verticalmente DivWhichNeedToBeVerticallyAligned pero no quiero usar esa función ya que causa un lío.

Un enlace de etiqueta href debe ser del mismo tamaño que divParent, quiero decir que debe poderse hacer clic en todo divparent. como pantalla: bloque.

Entonces, ¿hay alguna manera de CSS de alineación vertical o una solución ligera de jquery que también ayude?

Gracias.

Aquí jsFiddle: http://jsfiddle.net/XHK2Z/

*

Answer 1

puede utilizar un ayudante adicional para lograr la alineación vertical en un bloque con altura fija.

vistazo a esto: http://jsfiddle.net/kizu/7Fewx/

No debe tener un ayudante cerca de un bloque que desea alinear con:

.DivHelper { 
    display: inline-block; 
    vertical-align: middle; 
    height:100%; 
} 

Y añadir display: inline-block; vertical-align: middle; a .DivWhichNeedToBeVerticallyAligned

Answer 2

No hay manera de hacer esto con CSS sin saber la altura de la div niño.

Con jQuery, podría hacer algo como esto.

var parentHeight = $('#parent').height(); 
var childHeight = $('#child').height(); 
$('#child').css('margin-top', (parentHeight - childHeight)/2); 

Answer 3

si el padre no tiene ningún otro hijo. esto sería un css única "Hack"

DivParent{line-height:100px /*the div actual height*/ } 
.DivWhichNeedToBeVerticallyAligned{display:inline-block} 

otro hack es

DivParent{height:100px; position:relative} 
.DivWhichNeedToBeVerticallyAligned{height:20px; position:absolute; top:50%; margin-top:-10px;} 

Answer 4

Esta solución funciona para mí fina en navegadores modernos, incluido IE 10 y superior.

<div class="parent"> 
    <div class="child">Content here</div> 
</div> 

inlucluding este css

.parent { 
    height: 700px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.child { 
    width : 525px; 
} 

Answer 5

He estado usando la siguiente solución (sin posicionamiento, no-celda de la tabla/table-fila y sin altura de línea) desde más de un año, funciona con IE 7 y 8 también.

<style> 
.outer { 
    font-size: 0; 
    width: 400px; 
    height: 400px; 
    background: orange; 
    text-align: center; 
    display: inline-block; 
} 

.outer .emptyDiv { 
    height: 100%; 
    background: orange; 
    visibility: collapse; 
} 

.outer .inner { 
    padding: 10px; 
    background: red; 
    font: bold 12px Arial; 
} 

.verticalCenter { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    vertical-align: middle; 
} 
</style> 

<div class="outer"> 
    <div class="emptyDiv verticalCenter"></div> 
    <div class="inner verticalCenter"> 
     <p>Line 1</p> 
     <p>Line 2</p> 
    </div> 
</div> 

Answer 6

Aquí es otra opción para los navegadores modernos:

.child { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}