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

Posted 2023-03-05

【中文标题】如何垂直居中对齐位置：相对元素？

【英文标题】：How do I vertically center align a position:relative element?

【发布时间】：2012-08-22 21:16:07

【问题描述】：

如何将父容器垂直居中对齐到具有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>

【参考方案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。

希望对你有所帮助！

【讨论】：

哇，谢谢！它有效，只是好奇，这是唯一的方法吗？这是最优雅的方式吗？我正在寻找适用于现代浏览器的解决方案。所以过时的浏览器对我来说并不重要。

谢谢！我从来不知道为什么身体需要有高度：100% 才能起作用？有什么快速的答案吗？

@Vennsoh 因为如果你不指定height: 100% 到body，它只会足够大以适应元素，而不是全屏。而且您希望您的容器在全屏中居中，因此您需要body 来覆盖所有内容。