微信小程序——文字水平垂直居中

记录一下CSS设置文字水平垂直居中。

1、代码说明

对于直接在标签里面的文字，使用flex布局控制其中的文字水平和垂直居中

1.1、Html

<!-- pages/test/test.wxml -->
<view class='myText'>水平、垂直居中</view>

1.2、CSS

/* pages/test/test.wxss */
.myText{
    
    
  /* 用弹性盒子设置居中 */
  display: flex;
  align-items: center;/* 垂直居中 */
  justify-content: center;/* 水平居中 */

  /* 为了看效果，设置背景色和尺寸 */
  background-color: green;
  width: 500rpx;
  height: 500rpx;
}
}

2、效果

点个赞，一起加油啊！！！