微信小程序长页面中弹框居中的案例：
在对应的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;
}
辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
推荐阅读： webview中的页面怎么跳回小程序
云服务器
物理服务器
虚拟主机
跨境电商服务器