테이블 셀에 두 개의 div를 정렬하는 방법

Question

부트 스트랩 3 RC1을 사용하여 테이블 셀에 두 개의 div를 세로 정렬하려고합니다. 세로 정렬 클래스를 적용했지만 무엇이 누락 되었습니까? Bootply 여기 : 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

이 시도 :

.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%; 
}