图片和文字垂直居中-flex布局

因为float和position用的比较熟，所以flex只是了解了一下，基本不用。但是今天发现了flex在处理图片和文字对齐方便真是超爽der~

1.需求

就是一个盒子里面，图片和文字垂直居中

2.惯用套路

我之前的解决思路都是给图片设margin，给文字设line-height,
为了适配单位一般都不是px,用百分比设置，基本都是靠调试效果调出来的，非常不机智

好吧简直智障

3.新世界大门

//html
<view class="father">
   <image class="heart left" src="../../../image/like.png"></image>
   <view class="text right">赞</view>
</view>

//css
.father{
      //设好宽高
      width:140rpx;
      height:70rpx;

      display: flex;

      //水平方向元素居中，两边留白
      justify-content:center;

      //垂直方向元素居中，两边留白
      align-items: center;
}
//子元素就设好宽高就可以了...