模态不以屏幕为中心，css

Question

当我在同一页面上使用serverel模态时，我遇到了一个以模态为中心的问题。

因此，每当我按下圆圈内的按钮时，模态就会打开。在页面上有6个模态，当然每个都有唯一的ID。

在下面的图片中，您看到第一个模型是centeret - 只需使用黑客就可以了。

然而，当我按下另一个模型进行弹出时，它不会如下所示居中：

因此，我认为，javascript没有考虑屏幕的宽度或类似的东西。

以下是模态的CSS：

element {
    opacity: 1;
    visibility: visible;
    left: 50%;
}
.reveal-modal {
    top: -180px !important;
    width: 750px;
    background: url("modal-gloss.png") no-repeat scroll -200px -80px #EEE;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    border-radius: 5px;
}

正如您所看到的，我正在使用百分比，但问题仍然存在。这是什么，这个模态出了问题，因为它并不是所有模态的中心？

Answer 1

如果你想要一个绝对定位元素的中心，这里的代码是每次，不需要黑客（没有负边距和50％的偏移），它是＆＃39; s始终在其父级内部垂直和水平居中：

.element {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

在此处查看：

＆＃13;

＆＃13;

.element {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  width: 100px;
  height: 100px;
  background: #eee;
}

＆＃13;

<div class="element">Centered</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于您已经定位.reveal-modal，所以您需要做的就是设置适当的偏移量来抵消left: 50%值。

尝试在margin-left: -375px上设置.reveal-modal。这正是该元素宽度（750px）的一半。

Answer 3

对模态弹出窗口执行类似的操作：

HTML：

<div class="wrap">
    <div class="modal"></div>
</div>

CSS：

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.wrap {
position: absolute;
width: 100%;
height: 0;
top: 50%;
border: 1px solid blue;
}

.modal {
position: relative;
margin: auto;
border: 1px solid red;
width: 100px;
height: 200px;
top: -100px;
}

小提琴：http://jsfiddle.net/jpvLf87x/

在top: -100px;部分中，-100px应该是弹出窗口高度的一半，因此如果弹出窗口高度为500px，则应该有top: -250px。无论宽度

，margin: auto都会自动将其水平居中