方法一
利用 line-height,使line-height的值与view的height一致即可
wxml
<view class='container'>海轰</view>
wxss
.container{width: 400rpx;height: 100rpx;text-align: center;line-height: 100rpx;background: yellowgreen;}
效果
方法二
使用flex弹性布局
wxss使用下面的代码:
display: flex;
justify-content: center;
align-items: center;
wxml
<view class='container'>这是个例子</view>
wxss
.container{width: 400rpx;height: 200rpx;display: flex;justify-content: center;align-items: center;background: yellow;}
效果图
当然view里面嵌入text也行
wxml
<view class='container'><text>这是个例子</text></view>
效果和不使用text一样。
但是使用text时,text中的空格也会算
wxml
<view class='container'><text>这是个例子</text></view>
wxss不变
效果图