Jquery 在父对象中居中覆盖

这是另一个带转折点的中心重叠问题。我需要在它的父容器中居中覆盖

并发症

如果容器比屏幕长（即垂直滚动条），我需要覆盖层在屏幕中垂直居中，在父级中水平居中

如果包含适合屏幕（即没有垂直边栏），我需要在父容器中水平和垂直居中的覆盖

目前，在这两种情况下，我都将覆盖层居中显示在屏幕上

有关示例，请参见（尝试两项服务下面的寻呼机）和（使用寻呼机）

我目前用于屏幕居中的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才是理想的选择。

使用jQueryUI来解决这个问题——实际上非常简单

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();
}

函数是crolledintoview（elem）
{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（docViewTopelemBottom））；
}
if（IsCrolledinToView（容器））
{
$（覆盖）。位置({
我的“中心”，
在“中心”，
总数：$（容器）
});
}
其他的
{
$（覆盖）。位置({
我的“中心”，
在“中心”，
的：窗口
});
}
$（覆盖）.show（）；
}

仍然需要找到一种方法来垂直居中于窗口，水平居中于父容器，但现在可以了