Popup is not rendering in vertically and horizontally in middle of the screen

[shahzadsiddiqui8]

Hi I have made a popup but it is not rendering in middle of the screen, it should always render vertically and horizontally middle of the screen, even if I scrolled down of the page.

<div name="AdminMain_PopUpPanel" id="AdminMain_PopUpPanel" data-complex="true" class="panel_dashboard panel-primary_dashboard disp_none undefined mt-15 pa-10 col-lg-12 col-md-12 col-sm-12 col-xs-12 popup-screen-div ng-scope" style="border-radius: 8px; height: 500px; display: block;">

</div>

CSS:
.popup-screen-div {
    width: 70%;
    height: 700px;
    position: absolute;
    /* display: none; */
    z-index: 99999;
    background-color: #fff;
    margin: 1% 0 1% 15%;
    padding: 0px;
}

your early reply appreciated…

[Erik_J]

@shahzadsiddiqui8

…middle of the screen, even if I scrolled down of the page.

Hi,

Then you need to use position:fixed; instead.

[PaulOB]

As Erik said you need position fixed if you don’t want the element to scroll but your 700px height is going to mean that a lot of people won’t be able to see or scroll to all the content.

I would suggest that you use a media query based on height and change to viewport height at less than 700px height or position at top and bottom and set overflow to scroll.

I would also suggest you use margin auto rather than percentages.