如何通过绝对位置使Modal位于屏幕中心？

Question

我为我的框架创建了一个Modal.我创建了一些像HTML代码,CSS代码和JS代码......,它非常好用!

我唯一的问题是我不能让它成为中心和响应...这是我的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;
}

我已经读过如果你的宽度是固定的并且你的标签有一个绝对或固定位置,你可以通过给左边50%给它中心,但是它也不起作用......

任何帮助,谢谢......

Answer 1

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

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

这将从顶部和左侧将模态移动到50%,然后根据模态本身的尺寸将其调整回来.这对于每种情况都不是理想的,但它在许多模态用例中都很有效.

Answer 2

要使其具有响应性，请尝试设置width使用%或vw单位。此外，要水平居中，您可以使用margin: 0 auto. 将其垂直居中有点棘手，请查看此答案以了解更多信息。