不定宽高的弹出框自适应居中

传统的弹出框居中一般是这样的:

 .layer {
            position: fixed;
            top: 50%;
            left: 50%;
            background: red;
            width: 200px;
            height: 400px;
            margin-left: -100px;
            margin-top: -200px;
        }

父级给相对定位，子级给绝对定位，或者直接给当前元素固定定位，但是这个的适用范围是已知盒子的宽度和高端，在高度和宽度不定的时候（尤其是编写移动端页面的时候），可采用以下解决方案:

.layer {
            position: fixed;
            top: 50%;
            left: 50%;
            background: red;
            min-width: 200px;
            min-height: 400px;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

亲测，效果挺好。