html - 垂直对齐 DIV redux

Question

好的，所以这个问题has been asked and answered很多次，但我仍然无法产生有效的解决方案。

我想垂直对齐 DIV 中的任意中间元素。因此，上述问题中的链接教程说:

Specify the parent container as position:relative or position:absolute.
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.

An example of this in code:

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

除非与教程中的屏幕截图相反，this doesn't work .我唯一改变的是在外部 DIV 周围添加一个边框，这样您就可以看到垂直对齐方式。

所有这一切都是为了生成一个零高度的 DIV，它呈现为一条直线。如果给外层的DIV加上高度，可以看到里面的内容，但实际上并没有垂直对齐内容。那么，为什么这个示例不起作用？

Answer 1

我相信您的包含 div 也必须具有指定的高度。如果您使用 firebug 检查 #myoutercontainer div，您会发现它实际上有 13em 的高度，它们在给定的示例代码中没有显示。