微信小程序長頁面中彈框居中的案例：

在對應的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;
 
}