How to center a modal window on a page?

Question

I am trying center a modal window in the browser page. I just want to center it, so that it should be responsive for all the screens.

Answer 1

when showing you modal you should put display:flex instead of block like most people usualy do. then :

 

  What you want !
 

and CSS :

.modal {
 width: 100%;
 height: 100%;

 justify-content: center;
 align-items: center;
}

remember to put a close button in your modal-content because the other element on the screen won't be usable as the modal div covers all the screen size.