微信小程序-view水平垂直居中

–wxml–

<view class='main'>
    <view>水平垂直居中</view>
</view>

–wxss–

.main {
  display: flex;
  align-items: center;
  justify-content: center;  
  width: 100%;
  height: 300px;
}

当display: flex和justify-content: center使用时可以让view水平居中
而display: flex和align-items: center，justify-content: center一起用时可以实现垂直水平居中

但是，子容器的要设置一个固定高度，不然只能实现水平居中，垂直居中不生效

可以通过system.windowHeight动态设置高度，也可以直接用position：absolute填充宽高，但是使用绝对定位会对布局造成一定影响