What is the best way to make a popup window perfectly centered in the middle of the page?

We use this technique with Airbnb Wish Lists. Click on a listing to see it in action: https://www.airbnb.com/wishlists/get-the-royal-treatment Adjust your min/max-width's accordingly. Put whatever content you want inside .content and the browser should take care of the rest without JavaScript. HTML <div class='lightbox'> <div class='lightbox-inner'> <div class='content'></div> </div> </div> CSS .lightbox { overflow: auto; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: table; table-layout: fixed; background-color: rgba(0,0,0,0.7); z-index: 999; } .lightbox > .lightbox-inner { display: table-cell; text-align: center; vertical-align: middle; width: 100%; } .lightbox-inner > .content { display: inline-block; outline: none; text-align: left; min-width: 980px; max-width: 90%; } Update: Just found this implementation: .align-center { position: relative; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translate(-50%); transform: translateY(-50%) translate(-50%); } Browser support: http://caniuse.com/#feat=transforms2d Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

There are some details on a way of achieving vertical centering without any additional elements or JS, using CSS pseudo-elements, described here: http://css-tricks.com/centering-in-the-unknown/ . I haven't gotten a chance to use it in practice, but if it works, it seems reasonable to use it over the other solutions in my opinion.

Take a look at http://www.popu.ps for easy popup creation and management. http://POPU.PS is a Web Service which Helps you Create & Manage Popups Windows for your Websites. It's Quick and Easy to use. It then Gathers Important Analytics about how your Popups are Progressing. A great online tool for Single Website Owners, Developers, Webmasters or Marketers.

Going to drop this here if you need it; it's not CSS but since you'll likely be making the window with Javascript/jQuery anyway - I figured it couldn't hurt to list a resource. $.fn.centerMe = function(e){ var figures = new Array(); figures[0] = $(window).height(); figures[1] = $(window).width(); figures[2] = $(this).height(); figures[3] = $(this).width(); for(var i = 0; i < figures.length; i++){ figures[i] = figures[i]/2; } figures[0] = figures[0] - figures[2]; figures[1] = figures[1] - figures [3]; if(e == 'both'){ $(this).css({'top' : figures[0], 'left' : figures[1]}) } if(e == 'horizontal'){ $(this).css({'left' : figures[1]}); } if(e == 'vertical'){ $(this).css({'top' : figures[0]}); } } Paste this in and all you need to do to center an object is pass it to this function like so: $('#myDiv').centerMe('both'); The above code centers both horizontally and vertically. You can also pass it just 'horizonal' or 'vertical' to achieve on or the other instead of both. This also eliminates having to know the size of the window in advance if it's dynamically created because it finds the current height of the object. Hope this helped!

The simplest and most responsive way to do it is with a table. <table width="100%" height="100%"> <tr> <td valign="center"> <div id="popup"></div> </td> </tr> </table> At that point you just need to add 1 line of css and 0 lines of javascript #popup {margin: 0px auto; width:width-of-popup;} This method will take into consideration browser resizing and what have you. The other method I have used is with JavaScript. // store popup in a variable var $popup = $('#popup'); // grab your dimensions var popupWidth = width-of-popup; var popupHeight = height-of-popup; var windowWidth = window.outerWidth; var windowHeight = window.outerHeight; // calculate some css $popup.css({ position: absolute, // or fixed left: (windowWidth / 2) - (popupWidth / 2), top: (windowHeight / 2) - (popupHeight / 2) }); The benefit to using the JavaScript version is that can support popups with a variable width. build popup... // store popup in a variable var $popup = $('#popup'); // append it to the page $('body').append($popup); // grab popup dimensions var popupWidth = $popup.outerWidth(); var popupHeight = $popup.outerHeight(); // hide popup from view $popup.hide(); // grab your window dimensions var windowWidth = window.outerWidth; var windowHeight = window.outerHeight; // calculate some css $popup.css({ position: absolute, // or fixed left: (windowWidth / 2) - (popupWidth / 2), top: (windowHeight / 2) - (popupHeight / 2) }); // show popup $popup.show(); // or $popup.fadeIn() The downside to the JavaScript version is that it won't stay centered when you resize the browser. To solve this you would need to duplicate this code in the $(window).resize() callback.