close

How to center modal to the center of screen?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to center modal to the center of screen? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to center modal to the center of screen ?

  1. How to center modal to the center of screen ?

    to center modal to the center of screen If modal container is as following :
    <div id="containerDiv"> <!--HTML modal --> </div>
    Add css code
    #containerDiv{ margin : 0 auto; }

  2. How to center modal to the center of screen ?

    to center modal to the center of screen If modal container is as following :
    <div id="containerDiv"> <!--HTML modal --> </div>
    Add css code
    #containerDiv{ margin : 0 auto; }

Method 1

With position:absolute Assuming your modal is 300×300

.modal {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

With display:table An alternative way for that is to make display table

<div class="modal">
    <div class="body">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>
<style>
    .modal {display:table;}
    .body {display:table-cell; vertical-align:middle; text-align:center;}
</style>

Method 2

If modal container is as following :

<div id="containerDiv"> 
   <!--HTML modal -->
 </div>

Add css code

#containerDiv{
margin : 0 auto;
}

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment