小程序页面遮罩且不能滚动 + 内容居中显示

<view class="container">
    <view class="mask"></view>
    <view class="tips">内容内容。。。自由发挥</view>
　　 <view>内容内容。。。自由发挥</view>
</view>

.container {
    height: 100%;
    overflow: hidden;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0l 0.7);
    opacity: 1;
    z-index: 2;
    transition: .4s;
}
.tips {
　　position: fixed;
　　top: 50%;
　　left: 50%;
　　transform: translate(-50%, -50%);
　　z-index: 3;
　　background: #ffff;
}