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

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;">


.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…


Then you need to use position:fixed; instead. :slight_smile:


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.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.