Question

我有一个弹出框，我希望在窗口中完全居中。它具有以下CSS属性：

#pop_up {
    position: fixed;
    display: inline-block;
    border: 2px solid green;
    box-shadow: 0px 0px 8px 5px white;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    border-radius: 5px;
    background-color: grey;
}

我还有一些jQuery内容可以设置此元素的left和top属性。

$(document).ready(function() {
    window_height = $(window).height();
    window_width = $(window).width();
    pop_up_height = $('#pop_up').outerHeight();
    pop_up_width = $('#pop_up').outerWidth();
    pop_up_left = (window_width / 2) - (pop_up_width / 2);
    pop_up_top = (window_height / 2) - (pop_up_height / 2);
    $('#pop_up').css('left', pop_up_left);
    $('#pop_up').css('top', pop_up_top);
});

我让它提醒我所有变量，窗口变量是正确的，但对于pop_up_height和pop_up_width，它会提醒我'4'。这显然意味着它只是获得边界。如果我将其更改为.innerHeight();和.innerWidth();，则会提醒'0'。因此，它会根据我的width: max-content;属性在浏览器决定之前返回宽度。试图了解如何在浏览器auto之后获得宽度。

另外，当我指定left属性时，它是根据边框还是元素的实际内部来定位元素？因此，如果我给出一个2px边框和一个20px左边的边框，那么边框是左边的20px还是元素的实际内部？只是一个附带问题。

Answer 1

function popCenter()
{
  $('#pop_up').css({'top':($(window).height()-$('#pop_up').height())/2,'left':($(window).width()-$('#pop_up').width())/2});
}

$(document).ready(function() {
 popCenter();
 })

$(window).resize(function() { //if resize the window, keep the selector in center;
 popCenter(); 
 })

Answer 2

没有边框不会是20像素。元素将坚持左派。

Answer 3

尝试使用$("#pop_up").width();和.height（）

在浏览器确定其宽度后获取元素的宽度

3 个答案: