父级中心叠加

Question

这是另一个有中心的叠加问题。我需要在它的父容器中居中叠加。

并发症

1. 如果容器比屏幕长（即垂直滚动条），我需要在屏幕中垂直居中并在父级中水平居中
2. 如果包含适合屏幕（即没有垂直侧边栏），我需要在父容器中居中，水平和垂直居中。

我目前在两种情况下都将覆盖图设置为屏幕。

请参阅my homepage（尝试两个服务下面的寻呼机）和service list（使用寻呼机）作为示例。

我目前用于屏幕居中的CSS是

.overlay {
    display: none;
    padding: 20px 0;
    text-align: center;
    vertical-align: middle;
    background: #E9F7FF;
    border: 3px solid #97D1F4;
    font-size: 1.5em;
    color: #97D1F4;
    font-weight: bold;
    width: 300px;
    height: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -150px;
}

是的，我可以使用jQuery来实现这一点。但CSS只是理想的。

Answer 1

使用jQuery UI来解决 - 实际上非常简单。

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((docViewTop < elemTop) && (docViewBottom > elemBottom));
}

if (isScrolledIntoView(container))
        {
            $(overlay).position({
                my: "center",
                at: "center",
                of: $(container)
            });
        }
        else
        {
            $(overlay).position({
                my: "center",
                at: "center",
                of: window
            });
        }

        $(overlay).show();
}

仍然需要找到一种垂直居中到窗口并水平居中到父容器的方法，但这现在适用。