将 div 对齐到另一个绝对定位的 div 的中心（vertical-align 不起作用）

Question

我有一个 div(child) 必须绝对定位在另一个 div(parent).

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

里面的内容可能会有所不同，所以设置 top, right as constants 并不是一个真正的选择。

请不要使用 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>

将 div 对齐到另一个绝对定位的 div 的中心（vertical-align 不起作用）

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

css

css-position