Question

哇，我没想到这会像旋风一样。 My page有多个div弹出窗口，其中填充了数据库生成的内容，因此每个div都具有动态高度。更简单的说，它需要位于页面的中间，内容需要始终位于中间位置，以便从中心向上和向下扩展。

为什么这么难:(？

Answer 1

保证金：自动，提到容器div的高度

Answer 2

特别是如果您要求浏览器兼容性，那么在纯HTML / CSS中这或多或少是不可能的。在使用无关的table元素来包含我的内容时，我在浏览器中运气不错，因为表在技术上符合vertical-align CSS属性的条件。这需要获取实际上不是表格的内容（例如div s），并将其放置在小的1x1 table + td个组合中，其行为基本上与div s类似，除了它们正确对齐。对于好的浏览器，您可以通过提供div display:table-cell来避免这种情况，但对于糟糕的浏览器，它将无法工作。

你绝对可以在Javascript中实现这一点，Javascript很苛刻，但至少它是有效的。像这样的东西（提供Mootools代码）：

window.addEvent('load', function() {
    var parentElement = $('parent_element_id');
    var childElement = $('child_element_id');

    var parentHeight = parentElement.getStyle('height');
    var childHeight = childElement.getStyle('height');

    parentElement.setStyles({
        'position' : 'relative'
    });

    childElement.setStyles({
        'position' : 'absolute',
        'top' : (parentHeight - childHeight) / 2
    });

});

（JS代码未经测试，但你得到的图片）

如何垂直对齐POPUP div与DYNAMIC高度？

2 个答案: