小程序页面使内容充满整个屏幕，与内容水平和竖直都居中

在做页面的时候，有一些页面我们会希望将内容充满整个屏幕（高度、宽度100%），这样显得好看一点，比喻购物车没有记录，没有信息的时候，如下图

 <view  class='zhiti' style="height:{{winHeight-40}}rpx;">
    <view class='zwgz'>
      <image class='img' src='../../../image/images/[email protected]'></image>
      <view style='text-align:center'>
        <text>暂时没有回向记录</text>
      </view>
    </view>
  </view>

View Code

page{
    background:#F7F7F7;
}

.zhiti{
  width:95%;
  background: #FFF;
  margin: 20rpx;
}

.zwgz{
  width: 400rpx;
  height: 400rpx;
  color:#DDD;
  margin: auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align:center;
  position:relative;
  top:25%;
  font-size:16px;
}

.img{
  width: 150rpx;
  height: 200rpx;
}

View Code

以上这个复杂了一点，但是可以实现。应该有更加简洁代码。

第二种：占满屏，没有缝线的。

<view class="full">
      <view class="font">购物车竟然是空的哦</view>
      <view class="font">快去商城瞧瞧吧</view>
</view>

View Code

.full{
  height: 100%;
  width: 100%;
  position: fixed;/*定位*/
  text-align: center;/*文本居中*/
  display:flex;/*将对象作为弹性伸缩盒显示。（伸缩盒最新版本css3）*/
  flex-direction:column;/*属性决定主轴的方向垂直方向，起点在上沿*/
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
}

.font{
  color:sienna;
  margin: 10rpx 0;
}

View Code

 

这二种都可以实现了满屏，希望帮忙有需要的人。。。。。。。。。。。与大家学习学习。