Custom modal: position vertically in center when using percentages


#1

I have customized my modal using:

ion-modal
{
  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:

ion-backdrop
{
  top:-35%;
}

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

Any suggestions?