微信小程序——flex弹性布局水平垂直居中

实现最终效果

<!--index.wxml-->
<view class="body">
  <view class="out">
    <view class='in'>
      <text>in</text>
    </view>
  </view>
</view>

/**index.wxss**/
.body{
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
}

.out {
  width: 400rpx;
  height: 300rpx;
  background-color: blue;
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
}

.in {
  width: 150rpx;
  height: 100rpx;
  background-color: red;
}

text{
  font-size: 28px;
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
}

css将下面三行从text移动到in中依旧可以实现文字in居中

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

flex布局完整教程链接