How to position overlay fixed div to the center with css?

Admin 1
Viewed 29965

I have a div that appears once I have clicked some action to another element in the website. It is a fixed div 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.

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

Here's my code:

<div class="overlay-box">Some content</div>

CSS

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

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 margin:0px auto for fixed divs?

css html
3 Answers

I just Practiced before pasting here

.overlay-box {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: white; background: #666666; opacity: .8;
    z-index: 1000;
}
user_37434120
Related