1Margin: 0 auto 水平居中 

适用于block元素，或者位于flex布局里面的子元素

/* pages/margin/margin.wxss */

/*弹性布局下，图片即使只内联元素布局,也可用margin 0 auto 居中*/

/*第一种方法 */

.userinfo{

}

.userinfo image{

  width: 100rpx;

  height: 100rpx;

  /* 水平居中*/

  margin: 0 auto;

  /* 内联元素不行 */

  display: block;

}

/*第二种方法*/

.userinfo{

  display: flex;

}

.userinfo image{

  width: 100rpx;

  height: 100rpx;

  /* margin: 0 auto; */

}

2vertical-align 适用于inline-block元素，在弹性布局里面不起作用，通过给图片添加样式，反作用于文字

/* 实现文字和图片的垂直居中，*/

.userinfo{

/*若添加diaplay flex 则不起作用  */

}

.userinfo text{

font-size: 30rpx;

}

.userinfo image{

  width: 100rpx;

  height: 100rpx;

  vertical-align: middle;

}

3text-align 适用于blcok元素，或者弹性布局下的子元素

0

.userinfo{

  display: flex;

  flex-direction: column;

}

.userinfo text{

/* display: block;  */

font-size: 30rpx;

text-align: right;

}

.userinfo image{

  width: 100rpx;

  height: 100rpx;

}

---

总结：flex会使子元素 block水平化

margin:0 auto 和 tex-align：center 适用于blcok元素

vertical-align适用于inline-block水平元素，反作用于字体的对齐行为