Custom modal: position vertically in center when using percentages

I have customized my modal using:

  background: rgba(0,0,0,0.5);
  padding-left: 30px;
  padding-right: 30px;
  top: 35%;

.modal-wrapper {
  height: 30%;

This positions the modal vertically in the center, but the problem is the grey backdrop is lowered 35% as well. Of course, the backdrop should stay were it is, and start at top 0.

Tried adding:


But that didn’t work.
Also, moving top: 35%; to the .modal-wrapper doesn’t work.

Any suggestions?