Vertical align anything with just 3 lines of CSS

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

Same goes for horizontal centering. Where one – back in the day – would abuse margin-left by setting a negative margin to half of the width, we can now use translateX(-50%) to horizontally center a fluid-width box.

.element {
  position: relative;
  width: 400px;
  left: 50%;
  margin-left: -200px;
}

.element {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Some great demos of modals using this technique, along with some fancy animations, can be found on Codrops

Vertical align anything with just 3 lines of CSS →
Modal Window Effects →