How to position overlay fixed div to the center with css?
<p>I have a <code>div</code> that appears once I have clicked some action to another element in the website. It is a fixed <code>div</code> that appears on top of all divs and the background is darkened. I need to make sure that this div has been positioned to the center, and stays in the center even if the window is re-sized.</p>

<p>I have tried the <code>left</code>, <code>margin-left:50%</code> trick, but it's not doing the job.</p>

<p>Here's my code:</p>

<pre><code>&lt;div class="overlay-box"&gt;Some content&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.overlay-box {
background-color:#fff;
        width:550px;
left:50%;
    margin-left:-275px;
position:fixed;
text-align:center;
border:1px solid #000;
}
</code></pre>

<p>It doesn't position at center, and upon resizing it has a bigger margin towards the left than the right. How do I fix this? Is there a magic trick like <code>margin:0px auto</code> for fixed divs?</p>