Vertically Align Anything with Just 3 Lines of CSS Code

Have you to vertically align an element and it just won’t work.

vertical-align: middle; claims to do the trick but it won’t apply to every situation.

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

That’s all you need! It works straight out of the box, even in Internet Explorer 9.