将一个div对准另一个位于绝对位置的div的中心（垂直对齐不起作用）

Question

我有一个div（child），必须将其绝对放置在另一个div（parent）中。

在子div中，我有另一个div（侄子），并且我希望他的内容在中心垂直对齐； （在示例中，资源和复选框）

里面的内容可以变化，因此将top，right设置为常量并不是真正的选择。

请不要使用flexbox，因为我需要支持较旧的浏览器。

.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

将.lp设置为display: table;，并将其子项设置为display: table-cell;，这应该会为您带来想要的东西。

.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

将这些样式添加到.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>