CODEWITHSUNDEEP
htmlcss
user2851669
user2851669

Reputation:

centrally align a pop up window

I have a pop-up window which comes on the load of the page but I am unable to align it centrally. Following is the css for the pop-up :

    .reveal-modal 
{
padding:30px;
display: none;
position:relative;`
align:center;
margin:0 auto;
z-index:100000;
background:#FFFFFF;
border:2px solid #000;
word-wrap: break-word;
top:25%;
width:300px;
height:300px;
}

It should come at the center of the screen despite any screen size

Upvotes: 0

Views: 44

Answers (2)

Dmitriy
Dmitriy

Reputation: 4503

alternative - transform: translate

remove align:center;

.reveal-modal {
    padding:30px;
    /*display: none;*/
    position:  fixed; top: 50%; left: 50%;    
    margin:0 auto;
    z-index: 100000;
    background: #FFFFFF;
    border: 2px solid #000;
    word-wrap: break-word;    
    width:300px;
    height:300px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}
<div class="reveal-modal">popup</div>

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

You can used to position fixed and apply some css as like this .

 .reveal-modal 
{
padding:30px;

position:fixed;`
z-index:100000;
background:#FFFFFF;
border:2px solid #000;
width:300px;
height:300px;
    top:50%;
    left:50%;
    margin-top:-180px;
    margin-left:-180px;
}
<div class="reveal-modal">My Popup Content  </div>

Upvotes: 2

Related Questions