html - 模态不以屏幕为中心，css

Question

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

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

在下图中，您会看到第一个模型是 centeret - 只需为此使用 hack。

但是当我按下另一个模型弹出时，它没有居中，如下所示:

所以在我看来，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% 的偏移量)，它总是在其内部垂直和水平居中家长:

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

看这里:

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

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