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

Question

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

这是一个片段：

.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;andheight: 100%; width: 100%;和第二个display: table-cell;and vertical-align: middle;。还要确保你的body和html有完整的高度。

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

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

我希望这有帮助！