popup not assign the center of the screen

Question

Am using the below code to assign the popup exact center of the screen. But its not working. Popup appear in different places based upon the size of the div. But i want to display the div in the center of the screen.

.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;
}

score 0 · Answer 1 · answered Mar 11 '13 at 04:56

try this:

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

this will scale your popup, and give a dimension to it. You don't need to give margin, when your container is absolute: top, right,left,bottom values will do.

if you want to change the height and width of the popup, change the percentage values.

Also, you can use combination of height, and width along with top and left

popup not assign the center of the screen

1 Answers1