Center a popup using CSS - html

Question

I'm trying to center this popup but I can't seem to get it to work properly on smaller screens like iphone. It looks okay on desktop/laptop screens. Can anyone suggest any ideas how to use media queries to get it the popup to be centered properly regardless of screen size? thanks.
<style type="text/css">
#popup {
display: none;
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
top: 20%;
left:35%;
width: 25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
}
#popup-overlay {
display: none;
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
</style>

Answer 1

The easiest way to do this is to use a transform to centre the element. This will work no matter the width / height of the element
html, body {
height: 100%;
margin: 0;
}
#popup {
/*display: none;*/
background: #FFF;
border: 5px solid #444;
padding: 15px;
position: fixed;
width: 25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
top: 50%;
left:50%;
transform: translate(-50%, -50%)
}
#popup-overlay {
/*display: none;*/
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
<div id="popup-overlay"></div>
<div id="popup">Look at me!</div>

Answer 2

Can you try this,
#popup {
display: none;
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
top: 20%;
left: 50%;
width: 25%;
margin-left: -25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
box-sizing: border-box;
}
Note:
It is better to add some jsfiddle like url instead of providing partial details make easy to understand and workout.

Answer 3

left:50%;
margin-left:-120px;
(210 / 2) + 15 = 120

Answer 4

I would move the object to the center and then to the right the half of its size.
As the object width is not fixed, use transform to do that:
#popup {
...
left:50%;
transform: translate(-50%);
...
}
Despite transform is not available in IE8 and below, may be a good solution.
http://jsfiddle.net/fvLtd068/

Answer 5

For html5 enabled browsers use:
#popup {
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
/* top: 20%; */ //Remove
/* left: 35%; */ //Remove
/* width: 25%; */ //Remove
left: 50%; // Insert
top: 50%; // Insert
transform: translate3d(-50%, -50%, 0); // Insert
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
}