微信小程序---弹窗---图片居中

wxml

<view class="advertisement" wx:if="{{is_adver}}">
  <view class="adver-box">
    <image class="adver-img" src="../../images/about-img.png" mode="aspectFit" />
    <image class="down-icon" catchtap="downBox" src="/images/down-box.png" mode="widthFix"/>
  </view>
</view>

wxss

.advertisement {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 901;
}

.advertisement .adver-box {
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 90%;
  max-height: 90%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.advertisement .adver-box .adver-img {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: #cc6565;
}

.advertisement .adver-box .down-icon {
  position: absolute;
  top: -10rpx;
  right: -20rpx;
  display: block;
  width: 75rpx;
  height: 75rpx;
}


// 图片居中 切成正方形

.no-shoucang image {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: 500rpx;

height: 500rpx;

}

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    is_adver: true, //  广告弹窗
  },
  // 关闭广告弹窗
  downBox() {
    this.setData({
      is_adver: false
    })
  },
  onLoad() {

  },

})

微信小程序---弹窗---图片居中

推荐阅读