如何在手机放大时在屏幕中央打开一个弹出窗口？

Question

我在手机上的 blazor webassembly 应用程序中遇到弹出窗口问题。

我有一个网站，需要放大移动版。然后用户应该能够点击一个对象并打开一个弹出窗口。此弹出窗口始终在原始视口的左上角打开，但对放大并更改原始视口的用户不可见。我希望弹出窗口在用户当前视口的中心打开，即使他放大了。有谁知道如何达到这个目标？

目前我正在使用这个 css：

.modal {
        bottom: 0;
        left: 0;
        margin: auto;
        max-height: 500px;
        max-width: 600px;
        min-width: 300px;
        position: fixed;
        right: 0;
        top: 0;
    }

截图：

expected behaviour

behaviour when moved away from of the initial viewport or when zoomed in

Answer 1

<块引用>

transform 的 translate 值基于元素的大小，因此可以很好地居中。

.modal {
    margin: auto;
    max-height: 500px;
    max-width: 600px;
    min-width: 300px;
    position: fixed;
    right: 50%;
    top: 50%;
    transform:translate(-50%,-50%)
}