微信小程序页面元素居中布局

1、 小程序页面布局开发需求：

活动类型的小程序，要求：（1）页面全屏（2）页面中内容居中布局

2、小程序已知内容

（1）设计稿的尺寸为：750*1630
（2）设程序页面设置全屏模式的方法： “navigationStyle”: “custom”
navigationStyle导航栏样式：custom 自定义导航栏，只保留右上角胶囊按钮。default 默认样式

3、解决办法

首先应用小程序提供的api获取到当前手机的可使用窗口等信息
可以在app.js中获取用户的机型的所有信息，以备页面内的使用

补充：
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如 iPhone6 屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备
rpx换算px (屏幕宽度/750)
px换算rpx (750/屏幕宽度)

var basicInfo={};
wx.getSystemInfo({
  success: function (res)
  {
    console.log(res)
    basicInfo.hh = res.windowHeight,//可使用窗口宽度，单位px(设备相关的实际高度)
    basicInfo.ww = res.windowWidth,//可使用窗口宽度，单位px(设备相关的实际宽度)
    basicInfo.rpxR = 750/res.windowWidth;//将rpx换算px作为基础换算比例（已宽为标准）
    basicInfo.useH= res.windowHeight*(750/res.windowWidth);//将使用窗口的实际高度换成以750为基础的高度，方便使用
    basicInfo.userW= res.windowHeight*(750/res.windowWidth);
    basicInfo.statusBarHeight = res.statusBarHeight;//状态栏的高度，单位px（可用来做页面左上方的自定义按钮）
    basicInfo.pixe = res.pixelRatio;//设备像素比（暂未用到）
    basicInfo.safeArea = res.safeArea;//在竖屏正方向下的安全区域
  }
})

获取到页面的信息后，开始做布局

  <view class="bg" style="top:{{(pgH-1630)*.5}}rpx;">
    <image src="../../img/home/bg.png" mode="widthFix"></image>
  </view>

  .bg{
	  width:750rpx;
	  height: 1630rpx;
	  position: absolute;
	}

	var app = getApp();
	onLoad: function (options) {
	 this.setData({
	   pgH:app.globalData.basicInfo.useH
	 })
	},

最后的效果