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水平元素，反作用於字型的對齊行為