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

居中弹窗布局技巧

最新推荐文章于 2022-05-31 16:33:06 发布

原创最新推荐文章于 2022-05-31 16:33:06 发布 · 619 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使弹出窗口在网页上居中的CSS布局方法。该方法不仅适用于已知尺寸的弹窗，还适用于未知尺寸的情况，尤其是在移动端开发中更为实用。

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

 .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%);
        }

亲测，效果挺好。