css - 表のセルに 2 つの div を配置する方法

Question

ブートストラップ 3 RC1 を使用して、テーブル セル内の 2 つの div を垂直方向に配置しようとしています。vertical-align クラスを適用しましたが、何が欠けていますか? ブートプライはこちら: 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;
}