Css 相对定位图元的负上边距问题（垂直对齐）

我试图将容器内的div垂直对齐，并定义高度。我遵循的指导，但我面临一些问题

根据网站，如果我将此css用于此代码：

#containingBlock {
    height: 200px;
    position: relative;
    overflow: hidden;
    border: 1px solid red;
}

#containingBlock > div {
    position: absolute;
    top: 50%;
    border: 1px solid green;

}

#containingBlock > div > div {
    position: relative; 
    top: -50%;
    border: 1px solid orange;
}

<div id="containingBlock">
    <div>
        <div>
        This should be placed in the middle
        </div>
    </div>
</div>

可用小提琴

---

我应该在中间找到一篇完整的课文。但这并没有发生，因为排名靠前的-50%不起作用。根据top属性，+%的值应基于父级的高度，在这种情况下，父级的高度自动与其子级的高度相同。但似乎没有考虑自动包裹高度。如果我为父div指定一个显式的高度，我的意思是，第一个嵌套的，一切似乎都正常，但我希望它自动获取其子div的高度！这有什么问题？

如果要定位的块的高度已知，则可以使用负边距（即已知高度的50%）影响正确定位

如果不知道，您可以使用CSS转换来影响它，如下所示

-webkit-transform:translate(0%, -50%);

这会将对象垂直移动到其自身高度的一半…依此类推

HTML

这是一把小提琴：

---

你必须为div设置一个必须居中的高度，然后给它一个顶部：50%，然后用负边距减去他的一半高度。

这更合适，但它不适用于传统浏览器IE 6/7。正因为如此，我才使用了上面提到的技术。不过还是要谢谢你！顺便说一句，我真的很想理解为什么上述技术不起作用，而不是得到我需要的东西：-让我说我更感兴趣的是如何而不是目标！对，我一定要指定一个高度动态高度是不允许用这种方式的。我说的对吗？是的，因为你必须减去他的一半高度，如果没有指定的像素高度，你就不知道要减去多少：让我说这个话题：我讨厌css垂直定位。这是另一个解决方案：但它不漂亮，这真的取决于你需要什么。这是基于线的高度

<div class="containingBlock one">
    <div>
        This should be placed in the middle
    </div>
</div>

.containingBlock {
    height: 200px;
    position: relative;
    border: 1px solid red;
}

.containingBlock > div {
    position: absolute;
    top: 50%;
    border: 1px solid green;
    -webkit-transform:translate(0%, -50%);
}