Align a div in a center of another div that is positioned absolute (vertical-align doesn't work)

Question

I have a div(child) that is mandatory to be absolute positioned in another div(parent).

In the child div I have another div(nephew) and I want his content to be vertical align in the center; (in the example, Resources and the checkbox)

The content inside can variate, so setting top, right as constants is not really an option.

Please no flexbox, because I need to support older browsers.

.wrapper{
  position:relative;
  height:130px;
  background:red;
}

.lp {
  color:$white;
  position:absolute;
  height: 100%;
  top: 0;
  right: 0;
  background: blue;
  }
 .lp .toggler {
    display:inline-block;
    vertical-align:middle;
    padding: 20px;
  }

}

 <div class="wrapper">
   <div class="lp">
        <div class="toggler">
            <span> Resources </span>
             <input type="checkbox" />
        </div>
  </div>
</div>

Answer 1

Set .lp to display: table; and its child to display: table-cell; and that should get you what you want.

.wrapper{
  position:relative;
  height:130px;
  background:red;
}

.lp {
  display: table;
  color:white;
  position:absolute;
  height: 100%;
  top: 0;
  right: 0;
  background: blue;
  }
 .lp .toggler {
    display:table-cell;
    vertical-align:middle;
    padding: 20px;
  }

}

 <div class="wrapper">
   <div class="lp">
        <div class="toggler">
            <span> Resources </span>
             <input type="checkbox" />
        </div>
  </div>
</div>

Answer 2

Add these styles to .toggler

.lp .toggler {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
  }

.wrapper {
  position: relative;
  height: 130px;
  background: red;
}

.lp {
  color: $white;
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  background: blue;
}

.lp .toggler {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
}


}

<div class="wrapper">
  <div class="lp">
    <div class="toggler">
      <span> Resources </span>
      <input type="checkbox" />
    </div>
  </div>
</div>