uni-app自定义蒙版白板居中全端适配

错误在哪？
在uni-app中，明明所有代码都写对了，灰色蒙版中的白板还是不能居中。

wrong

先不急，我们从头开始讲。

1. 适配高度

mask.png

灰色蒙版是每个全图消息的必备背景。
但为了适配各端的屏幕高度，我们以前通常要：

uni.SystemInfoSync.windowHeight

但我们有更好的选择，即vh, vw（视窗高度和宽度）：

position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3);  // 浅灰色即可

2. 居中适配
还需要对需要的消息进行弹性居中。

display: flex;
align-items: center;
justify-content: center;

重点来了
但这样做还是不足以适配，需要：

top: 0;

和JS文件中添加

options: {
      virtualHost: true;
}

这样白板的居中就能适配

• H5端
• 微信小程序
• 支付宝小程序

right

所有代码

position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3); 
display: flex;
align-items: center;
justify-content: center;

options: {
      virtualHost: true;
}

---

关注我，日更1个教程里没有的前端小知识点。
动动你发财的小手，给拎包哥点个赞吧！