Comment aligner deux divs dans une cellule de tableau

Question

J'essaie d'aligner verticalement deux div dans une cellule de table, en utilisant bootstrap 3 RC1. J'ai appliqué la classe verticale-aligner mais qu'est-ce que je manque? Bootply ici: http://bootply.com/73625

HTML

<div class="content"> 

    <div class="col-lg-6 col-md-6 col-12 child1">Child content</div> 
    <div class="col-lg-6 col-md-6 col-12 child2">Child content</div> 

</div> 

CSS

.content{ 
position:absolute; 
top:40px; 
bottom:0px; 
width:100%; 
    border:4px solid green; 
    display:table-cell; 
    vertical-align:middle; 

} 

.child1{ 
    border:4px solid blue; 
} 

.child2{ 
    border:4px solid red; 
} 

Answer 1

Essayez ceci:

.content{ 
    position:absolute; 
    top:40px; 
    bottom:0px; 
    width:100%; 
    border:4px solid green; 
    display:table-cell; 
    vertical-align:middle; 

} 

.child1{ 
    border:4px solid blue; 
    display: block; 
    width: 100%; 
} 

.child2{ 
    border:4px solid red; 
    display: block; 
    width: 100%; 
}