小程序垂直居中

拼搏现实的明天。 2022-04-04 11:49 214阅读 0赞

<view class='ercode' style='height:{
       {viewHeg}}px'>
      <view>
        <image src='https://developers.weixin.qq.com/miniprogram/dev/image/demo.jpg'></image>
      </view>
    </view>

.ercode{width:100%;display:flex; justify-content:center; align-items:center;padding: 30rpx;box-sizing: border-box;background-color: transparent;position: fixed;left: 0;top: 0;z-index: 999;}
    .ercode>view{width: 400rpx;height: 400rpx;border:2px solid #ededed;padding: 20rpx;box-sizing: border-box;background-color: #ffffff;}
    .ercode>view>image{width: 100%;height: 100%;}

data{
        viewHeg: 0
    }
    
    onLoad: function(options) {
        // 获取屏幕可视区域高度
        var that = this;
        wx.getSystemInfo({
          success: function(res) {
            console.log('高度', res.windowHeight);
            that.setData({
              viewHeg: res.windowHeight
            });
          },
        })
      }

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220404/b56e16eccf134ca9acd6861fe4cfb6d5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关【微信小程序】文字怎么垂直居中

[在这里插入图片描述][20190907200739612.png] wxml: <view class="student"> <text>学生</...

冷不防/ 2024年04月18日 14:07/ 0 赞/ 74 阅读

相关小程序图片水平垂直居中显示在view中

效果如下：无论图片多大都是显示在容器view垂直居中，不拉伸 ![20200514151542503.png][] <view class="viewimag

朱雀/ 2023年03月12日 09:02/ 0 赞/ 5 阅读

相关 CSS垂直水平居中方式大全(一)----水平居中-垂直居中

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。一、水平居中

冷不防/ 2022年06月04日 01:53/ 0 赞/ 463 阅读

相关小程序view标签水平垂直居中

效果图： ![在这里插入图片描述][20190101153252385.png] test.wxss代码 / 让view标签居中显示 / .bgd{

Love The Way You Lie/ 2022年04月10日 08:59/ 0 赞/ 398 阅读

相关小程序垂直居中

<view class='ercode' style='height:{ {viewHeg}}px'> <view> <ima

拼搏现实的明天。/ 2022年04月04日 11:49/ 0 赞/ 215 阅读

相关小程序view水平垂直居中

水平垂直居中 //wxss .main \{ display: flex; align-items: center; justify-content: cen

川长思鸟来/ 2022年03月02日 08:57/ 0 赞/ 318 阅读

相关小程序的垂直水平居中

问题描述要实现水平/垂直居中，css设置 display: flex; justify-content: center; //水平居中 ali

小灰灰/ 2022年01月23日 05:21/ 0 赞/ 259 阅读

相关水平居中和垂直居中

水平居中若元素为inline元素比如`a,b,strong,i,span,img,input,select`等，为父元素设置`text-align: cent

约定不等于承诺〃/ 2022年01月18日 23:11/ 0 赞/ 409 阅读

相关水平居中和垂直居中

1.水平居中 (1) 文本、图片等行内元素的水平居中　　给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元

た入场券/ 2021年11月23日 08:08/ 0 赞/ 459 阅读

相关 CSS垂直居中

垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加

心已赠人/ 2021年09月10日 16:26/ 0 赞/ 475 阅读