How to position the div popup dialog to the center of browser screen?

Question

I need to position div popup to the center of browser screen ( no matter what size the screen is). And I want to keep the position as absolute as I don\'t want to move the p

Answer 1

One solution where we need not know the width/height of the dialog and then assume the margins.

Html:

  <-- This div because I assume you might have a display that is not a flex. '
    

        

            stuffs
        
    

Css:

#dialog-contain { // full page container.
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    ...
}

#block {  // another container simply with display:flex.
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
}

#centered {   // another container that is always centered.
    align-self: center;
}