css - 由于绝对位置，如何使模态框在屏幕中央？

Question

我为我的框架创建了一个模式。我创建了一切，例如 HTML 代码、CSS 代码和 JS 代码...，效果非常好!

我唯一的问题是我不能让它成为 CENTER & RESPONSIVE ... 这是我的 Modal Div CSS 代码:

.ji-modal {
    width: 700px;
    height: auto;
    background-color: #FFF;
    border: 1px solid #CCC;
    position: fixed;
    top: 70px;
    left: 325px;
    display: none;
    z-index: 1000005;
}

我读到如果你的宽度是固定的并且你的标签有绝对或固定位置，你可以通过给左 ro 右 50% 使其居中，但它也不起作用......

任何帮助，谢谢...

Answer 1

以百分比设置大小是一个不错的选择，另一种选择是使用transform:

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这会将模态从顶部和左侧移动 50%，然后根据模态本身的尺寸将其调整回来。这并不适用于所有情况，但在许多模态用例中效果很好。