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>

提供小提琴here

我应该在中间完美地获得一个文本。但这并不会发生，因为top: -50%不起作用。根据{{3}}，top属性+％值应基于父级的高度，在这种情况下，父级的高度自动相同。但是＆＃34;自动包裹高度＆＃34;似乎没有考虑到。如果我为父div指定一个显式高度（我的意思是，第一个嵌套），一切似乎都没问题，但我希望它能自动获取其子项的高度！这有什么问题？

Answer 1

如果要定位的块的高度已知，则可能会影响正余量，即负边距（即已知高度的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

Answer 2

这是一个小提琴：http://jsfiddle.net/dC22r/4/

你必须设置一个必须居中的div的高度然后给它top:50%并用负margin减去他的高度的一半。

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

2 个答案: