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

LCH-M 2021-09-02 原文

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

 <view  class=\'zhiti\' style="height:{{winHeight-40}}rpx;">
    <view class=\'zwgz\'>
      <image class=\'img\' src=\'../../../image/images/icon_tu8@2x.png\'></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;
}