我有一个 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
这样的魔术?
最佳答案
我只是在粘贴之前练习过
.overlay-box {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color: white; background: #666666; opacity: .8;
z-index: 1000;
}
关于html - 如何使用CSS将覆盖固定的div定位到中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35990304/