移动端图片在DIV中居中显示css样式

主页中元素

<div id="pagePanel">
    <img src="assets/Info.png"></img>    
</div>

css样式

方法一：通过比例计算（top 10%  width 80  ）只要top*2+width=100%，就ok,同理高度一样

#pagePanel{
    position: fixed;
    top:calc(10%);
    left:calc(10%);
    width:80vw;
    height:80vh;
    z-index: 501; 
    border:1px solid red;    
}

#pagePanel img{
    width:80vw;
    height: 80vh;
    border-radius: 10px;
}

方法二：分别设置宽高，并设置对齐 原理跟上面一样

#pagePanel{
    margin:20px 20px 20px 20px;
    position: fixed;
    width:calc(100vw - 40px);
    height:calc(100vh - 40px);
    z-index: 501; 
    border:1px solid red;    
}

#pagePanel img{
    width:calc(100vw - 40px);
        height: calc(100vh - 40px);
    border-radius: 70px;
}

全屏居中：

#pagePanel{
 position: fixed;
 width:100vw;
 height:100vh;
 z-index: 501; 
}
#pagePanel img{
 width:100vw;
    height: 100vh;
 }