从CSS角度来做一个模态框

今天我们从CSS角度来做一个下图这种模态框。

先上代码：?https://developers.weixin.qq....

模态框背后的背景是一个fixed定位，四个方向都为0的view，主要是怎么实现中间弹窗的垂直水平居中，这里提供两个方案。

1、定位

这种方案是将弹窗设置绝对定位后，左边（上边）距设为50%，就是弹窗左上角距父级左上角的距离正好是父级的宽度（高度）的50%，就是在正中间，同时使用?transform?属性，将弹窗向左（上）移动自身宽度（高度）的50%，来实现弹窗正好在水平（垂直）方向都能居中。

position: absolute;
top: 50%;
left: transform: translateX(-50%) translateY(-50%);

2、flex布局

这种方案更简单，只需要将父级设置为flex布局的同时设置?justify-content?和?align-items都是?center?就可以了。

彩蛋
模态框弹出后，在父级上加上?catchtouchmove="ture"?就可以阻止背后页面的上下滚动。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!