css - 垂直对齐堆叠的内容

Question

我有一个 div，当鼠标悬停在链接上时，它充当类似工具提示的弹出窗口。它在概念上有 5 行:一行文本、一个按钮、一个分隔符、一行文本、一个按钮。

 ----------------
|   Click here:  |
|    [Button1]   |
|   ----------   |
| Or Click Here: |
|    [Button2]   |
 -------  -------
        \/

目前每一行都是一个 div，其内容具有图像背景，并且一切正常。但是现在我们需要有条件地显示顶部和底部按钮的组合。当显示或隐藏“行”时，如何使可见元素在弹出式 div 中垂直居中？弹出式 div 的顶部至少需要有 20 像素的内边距。

 ----------------  ----------------
|                ||                |
| Or Click Here: ||   Click here:  |
|    [Button2]   ||    [Button1]   |
|                ||                |
|                ||                |
 -------  -------  -------  -------
        \/                \/

我读过这个:http://www.boutell.com/newfaq/creating/centervertically.html但我不确定如何将它应用于多个堆叠的内容。

Answer 1

为容器 div 尝试这种样式:

<div style='display:table-cell; vertical-align:middle'></div>