Vertically align using the transform property

Back in the days that layout was table-based, vertical alignment of an element inside another was easy. There are many methods of trying to replicate that behaviour but this is the more usual method nowadays.

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}