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

.modal
{
position: fixed;
left: 50%;
}

Answer 2

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

<div class="modal" id="modal">
 <div class="modal-content">
  What you want !
 </div>
</div>

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.