如何使用CSS将固定div叠加层定位到中心？

Question

我有div一次我点击了一些行动，在该网站的另一个元素出现。它是固定div出现在所有div上方的固定元素，背景变暗。我需要确保此div已定位到中心，即使窗口已调整大小，它也将保持在中心。

我已经试过了left，margin-left:50%把戏，但它没有做的工作。

这是我的代码：

<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;
}

它不会定位在中心位置，并且在调整大小时，它的左边缘比右边缘更大。我该如何解决？有像margin:0px auto固定div 一样的魔术吗？

Answer 1

我刚在这里练习之前

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

Answer 2

将 div 放入另一个宽度为 100% 且文本居中对齐的 div 中。还设置 .overlay-box {margin: auto}

.container-box {
   background-color:#000;
   width:100%;
   height: 100%;
   text-align:center;
}
.overlay-box {
   background-color:#fff;
   width:300px;
   margin: auto;
}


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

工作 JSFiddle：https ://jsfiddle.net/5kkdaqe6/