弹出层 如何支持浏览器 可视窗口 的大小改变

Question

弹出层的问题，以半个屏幕的宽度触发弹出层，然后把浏览器窗口最大化，如何让弹出层 仍然在可视化窗口的正中央

可视化窗口比较小的时候 触发弹出层，例如下图的第一张图片
最大化浏览器窗口的时候，弹出层的位置是没有变化的，例如第二张图片
问题，如何在改变可视化窗口的大小后，弹出层仍然在可视化窗口的正中央
新人求教 先谢过了

Answer 1

window.onresize=fucntion(){
    //调用居中的方法
}

Answer 2

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); //当然知道弹窗宽高的话，用margin-top:负的高的一半，margin-left:负的宽的一半也行

Answer 3

响应式布局，弹出层的width：100%，内容居中

Answer 4

弹出层：

.modal{
    position: fixed;
    z-index:99;
    width:xxx;
    height:xxx;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

遮罩层

.mask{
   position: fixed;
    z-index:98;
    width:100%;
    height:100%;
    background-color:xxxx;
}

Answer 5

这种情况百分比布局，然后定位偏移量也是百分比方式写。

Answer 6

给登录框加以下样式：

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);