小程序的垂直水平居中

问题描述

要实现水平/垂直居中，css设置

display: flex;
justify-content: center; //水平居中
align-items:center;  //垂直居中

样例

第二层是设置margin-left后的效果

代码

xml

<view class='container-in'>
    <label>头像</label>
</view>
<view class='line'></view>

<view class='container-in'>
  <view>
      <label>Sakura</label>
  </view>
</view>

css

.container-in{
  display: flex;
  justify-content: center;
  align-items:center;
  width: 100%;
  height: 80px;
 
}