Cacher is the code snippet organizer for pro developers

A solution for this is to either set its parent element to preserve-3d:

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Or, you can set the perspective of the element

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