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;
}

我已经读过如果您的宽度是固定的＆amp;你的标签有一个绝对或固定的位置，你可以通过给左边的左边50％给它居中，但它也不起作用......

任何帮助，谢谢......

Answer 1

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

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

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

Answer 2

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

Answer 3

您尝试过此操作吗

.modal-content{
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 50%;
}

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

3 个答案: