如何使微信小程序盒子内容居中显示

这个未设置之前的样式

未修改之前的WXML代码

<view class='container'>
  <image class='user-avatar' src='/images/fengjing.jpg'></image>
  <text class='user-name'>Hello World</text>
  <view>
    <text>开始小程序之旅</text>
  </view>
</view>



如果用以前CSS写就会很麻烦，这个时候可以用flex布局
WXSS代码如下：

.container{
  display: flex;/* 如果把盒子设置为弹性盒子,必须要加的 */
  flex-direction: column;/* 设置一个大盒子内容垂直排列*/
  align-items: center;/* 设置一个大盒子内容居中排列*/
}

设置效果如下：