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

1.用line-height的值和view的height值一样

wxml:

<view class='container'>
    这是个例子
</view>

wxss:

.container{
  border: 2rpx black solid;
  width: 400rpx;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
}

效果：

2.用flex布局

wxml:

<view class='container'>
    <text>这是个例子
    </text>
</view>

wxss:

.container{
  border: 2rpx black solid;
  width: 400rpx;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

效果和第一种结果一样。

（注意text标签后如果换行再写文字，那显示的结果也会有空行）

比如我居中后这样写：

<view class='container'>
    <text>
    这是个例子
    </text>
</view>

结果是：

这样写：

<view class='container'>
    <text>

    
    这是个例子
    </text>
</view>

结果：