Вертикальное центрирование нескольких элементов div в его родительском элементе div

У меня есть набор элементов внутри родительского элемента. Высота родительского элемента может изменяться (она будет изменена некоторыми файлами jQuery). Вот как выглядит макет:

 <div class = "parent">
     <div class="child1">
     </div>
     <div class="child2">
     </div> 
 </div>

Я хочу, чтобы дочерние элементы были выровнены по середине родительского div, но я не могу понять, как написать CSS для этого. Я пробовал писать что-то вроде:

 .child1 {
        ...
       vertical-align: middle;
 }

Что не работает. Я также пробовал:

 .parent {
       display:table;
 }
 .child1 {
       display:table-cell;
       vertical-align:middle;
 }

Это тоже не работает. Есть идеи, как это сделать?