Vertical align middle with css

Lets take a look at various methods of aligning an element in the middle of its parent vertically.

1.Table method

     Vertical-align property doesn't works on display block elements.So, one way to get the vertical-align property work is to set the parent element display:table and its child element (which is to be aligned) display:table-cell.Then the vertical-align property will work and the element will be aligned in the middle.

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