How to center div vertically inside of absolutely positioned parent div

Question

I am trying to get blue container in the middle of pink one, however seems vertical-align: middle; doesn\'t do the job in that case.

Answer 1

You may use display:table/table-cell;

.a{
   position: absolute; 
  left: 50px; 
  top: 50px;
  display:table;
}
.b{
  text-align: left; 
  display:table-cell;
  height: 56px;
  vertical-align: middle;
  background-color: pink;
}
.c {
  background-color: lightblue;
}

  

    
test