微信小程序个人商城开发(第二篇：我的页面之显示登录界面和头像)

今天我要实现我的页面登录部分，这部分有几个关键的难点。

1、怎么实现图片是圆边框。

我們只要在圖片上增加樣式border-radius: 50rpx; 這里把他的圆角定义成高度值就会变圆外框了。

.user-center-card-myphoto{
    
    
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
}

2、怎么实现全屏显示。

我们只要在需要全屏显示的页面json文件中增加。“navigationStyle”:“custom”

{
    
    
  "usingComponents": {
    
    
    "yd-user-center-card":"./componts/user-center-card"
  },
  "navigationStyle":"custom"  
}

3、怎么把图片和文字垂直居中对齐

这里在布局中我们比较常用的就是弹性盒flex，要使用弹性盒，必须先将一个元素设置为弹性容器，
dispaly:flex 使用弹性布局，
justify-content: flex-start; justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列） flex-start 元素沿着主轴起边排列，也就是左对齐的话就会先用完左边，多余的空在右边。
align-items: center; align-items元素在辅轴上如何对齐， center 居中对齐，这个可以做到水平方向的几个元素能垂直居中。
color: #333;
position: relative;
position:relative;：相对定位
在元素原有的位置基础上，根据设置的 top,left调整元素位置
不会改变页面布局，不影响其他元素的偏移，因此会在此元素未添加定位时所在位置留下空白，此功能主要为了进行微调一些位置。