CODEWITHSUNDEEP
css
wyc
wyc

Reputation: 55263

How can I vertically center this css/javascript based modal dialog?

I've successfully centered horizontally my overlay dialog with margin: 0 auto;.

But I have no idea how to center it vertically.

Any suggestions?

CSS:

/* =Overlay
-------------------------------------------------------------- */
#overlay {
     display: none;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlay #dish-popup {
     margin: 0 auto;
     background-color: #fff;
     padding:15px;
     text-align:center;
     width: 810px !important;
     height: 700px !important;
}

Upvotes: 2

Views: 5359

Answers (3)

user920041
user920041

Reputation:

You can figure out vertical offset with jQuery and set it when page is loaded:

$(document).ready(function(){
   var top = ($("body").height() / 2) - ($("#dish-popup").height()/2);
   var left = ($("body").width() / 2) - ($("#dish-popup").width()/2);
   $("#dish-popup").offset({top: top, left: left});
});

Upvotes: 1

defau1t
defau1t

Reputation: 10619

There are a lots of methods to achieve CSS vertical centering depending on your layouts(divs or tables). I would suggest you look here

CSS VERTICALLY CENTERING

Upvotes: 2

nvcode
nvcode

Reputation: 343

You need to add the rule 100% for every parent in your html structure for this to work, if all parents do not have a height of 100% then it would not center vertically on any screen.

Upvotes: 1

Related Questions