如何使用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;
}

它不位于中心，并且在调整大小时它向左的边距比向右的边距大。我该如何解决？固定div是否有像 margin:0px auto 这样的魔术？

原文由 user5831063 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我只是在粘贴之前练习过

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

原文由 Dev Matee 发布，翻译遵循 CC BY-SA 4.0 许可协议