如何垂直居中对齐位置：相对元素？

Question

如何将父容器垂直居中对齐到具有position:relative 的画布？父容器有一个带有position:absolute 的子元素。子元素已定位在父容器的中心。

这是一个sn-p：

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red;
  margin: auto;
}

.item {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

<div class="container">
  <div class="item"></div>
</div>

Answer 1

一种解决方案是用两个包装器包装您的.container；给第一个display: table; 和height: 100%; width: 100%; 和第二个display: table-cell; 和vertical-align: middle;。还要确保您的 body 和 html 有完整的高度。

这是一个小的工作演示：little link。

另一种方法是将top: 50%; 应用于您的.container 和margin-top: -150px; (300px / 2 = 150px)。 （请注意，此方法需要您知道容器的确切高度，因此它可能不是您想要的，但也可能是！）。后一种方法的一个小工作演示：another little link。

希望对你有所帮助！