html - 弹出窗口未分配屏幕中心

Question

我正在使用下面的代码来分配屏幕的弹出窗口。但它不起作用。弹出窗口根据 div 的大小出现在不同的位置。但是我想在屏幕中央显示 div。

.pnl_renewal_res
{   
    background:White;
    position: absolute;
    top: 50%;
    left: 50%;
    margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */
    display: none;
    border:1px solid  #333333;
}

Answer 1

试试这个:

.pnl_renewal_res
{   
    background:White;
    position: absolute;
    top: 30%;
    left: 30%;
    right:30%;
    bottom:30%;
    display: none;
    border:1px solid  #333333;
}

这将缩放您的弹出窗口，并为其指定尺寸。 当您的容器是绝对的时，您无需提供边距:顶部、右侧、左侧、底部值即可。

如果要更改弹出窗口的高度和宽度，请更改百分比值。

此外，您可以结合使用height和width以及top和left