微信小程序长页面中弹框如何居中

微信小程序长页面中弹框居中的案例：

在对应的wxml文件中添加以下代码：

<form bindsubmit="formSubmit" bindreset="formReset">
    <view class="commodity_screen" bindtap="hideModal2" wx:if="{{!flag}}"></view>
    <view class="wx-popup" style="margin:-{{windowHeight/2}}px 0 0 -{{windowWidth/2}}px" hidden="{{flag}}">
      <view class='popup-container'>
        <view class="wx-popup-title">添加备注</view>
        <view class="wx-popup-con">
          <view class="input">
            <input class="inputRemark" name="nickName" value="{{nickName}}" placeholder="请输入备注" bindinput="remarkInput" />
          </view>
        </view> 
        <view class="wx-popup-btn">
          <button class="btn-no" formType="reset" bindtap='hideModal2'>取消</button>
          <button class="btn-no" formType="submit">确认</button>
        </view>
      </view>
    </view>
  </form>

在对应的js文件中添加以下代码：

Page({
  data: {
    windowWidth: '',
    windowHeight: '',
  },
  onShow: function() {
    //获取系统信息:获取当前屏幕可见区域的宽和高
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          "windowWidth": res.windowWidth, //可使用窗口宽度，单位px
          "windowHeight": res.windowHeight, //可使用窗口高度，单位px
        })
        console.log(res.windowWidth, that.data.windowWidth);
        console.log(res.windowHeight, that.data.windowHeight);
      },
    })
  },
})

在对应的wxss文件中添加以下代码:

.wx-popup {
  position: fixed;
  z-index: 2000;
}
 
.popup-container {
  position:fixed;
  left: 50%;
  top: 50%;
  width: 80%;
  max-width: 600rpx;
  background: #fff;
  z-index: 2000;
 
}