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这样的魔术？

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/

Answer 3

您可以将top，right，bottom，left设置为0，将margin设置为auto，垂直和水平居中对齐固定div。但这只有在使用CSS设置div的高度时才有效。

.overlay-box {
    background-color: #fff;
    border: 1px solid #000;
    text-align:center;
    height: 200px;/*height needs to be set*/
    width: 550px;
    margin: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

如果您无法设置高度，请考虑使用弹性布局https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何用css将叠加固定div定位到中心？

3 个答案: