css - 相对定位元素的负上边距问题(垂直对齐)

Question

我试图在定义高度的容器内垂直对齐 div。我正在遵循 http://www.vertical-align.com/ 的指南，但我面临一些问题。

根据网站，如果我将此 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>

fiddle 可用 here

我应该在中间完美地获得一个文本。但这不会发生，因为 top: -50% 不起作用。根据Mozilla dev top 属性 + % 值应基于父项的高度，在这种情况下，它自动具有与其子项相同的高度。但是似乎没有考虑“自动换行高度”。如果我为父 div 指定一个明确的高度(我的意思是嵌套的第一个)，一切似乎都没问题，但我希望它自动获取其子项的高度!这有什么问题吗？

Answer 1

如果要定位的 block 的高度已知，您可以使用负边距(即已知高度的 50%)影响正确定位。

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

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

这会将对象垂直移动其自高度度的一半......等等

HTML

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

CSS

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

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

JSfiddle