Javascript 将元素设置在指定容器的中间 在我的应用程序中，当用户完成某个操作时，我希望在屏幕中间显示一些信息。（就像闪光信息一样）

现在，我创建一个函数来实现这一点：

var createFlashMessage = function(message, parentDom, time) {
        parentDom = $(parentDom);
        var mask = parentDom.children().first();
        if(!mask.is('message-mask')) {
            mask = $('<div>').addClass('message-mask');
            mask.hide().appendTo(parentDom);
        }
        var messageSpan = $('<span>').html(message).appendTo(mask);
        var conWidth = parentDom.width(), conHeight = parentDom.height();
        messageSpan.css({
            left:Math.floor(conWidth / 2-messageSpan.width()/2),
            top:Math.floor(conHeight / 2-messageSpan.height()/2)
        }).fadeIn(500,function () {
            $(this).delay(time || 3000).fadeOut();
        });
    };

但是，当我运行它时，我发现容器无法将mask div定位在正确的位置

---

如何做到这一点？

不确定，因为我更像一个C#guy，但我认为应该更像这样

        left:Math.floor((conWidth / 2)-(messageSpan.width() /2)),
        top:Math.floor((conHeight / 2)-(messageSpan.height() /2))

---

增加弹出窗口的

z-index

，使其

向左浮动

，然后可以执行以下操作：

messageSpan.css('margin-left', ((conWidth - messageSpan.width()) / 2));
messageSpan.css('margin-top', ((conHeight - messageSpan.height()) / 2));

此外，台面遮罩应更像这样：

.message-mask  {
    position:fixed;
    display: none;
    width: 100%;
    height: 100%;   
    left:0px;
    top:0px;
    z-index: 9998;
}

---

然后，当您显示弹出窗口时，您可以取消隐藏背景。

固定位置无法工作，它基于整个窗口，而不是指定的元素。我认为这无关紧要，因为遮罩仍将覆盖您的所有屏幕。我认为您的问题是.message mask div没有插入到正确的位置。试着在标签后面插入遮罩元素，这样它就可以固定并覆盖整个屏幕。

.message-mask  {
    position:fixed;
    display: none;
    width: 100%;
    height: 100%;   
    left:0px;
    top:0px;
    z-index: 9998;
}