我们先把原始代码贴上
index.wxml
<!--pages/index.wxml-->
<view>
<text>AI花草识别</text>
</view>
/* pages/test.wxss 默认为空 */
显示效果如下：
可以看到，文字是默认居左显示的。
下面代码可以让文字居中，但是会有一个问题出现，文字没有上下居中。
<!--pages/index.wxml-->
<view class='main'>
<text>AI花草识别</text>
</view>
/* pages/index.wxss */
.main{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center；
}
我们通过调试功能看一下
image.png
我们可以看到，整个页面的高度才25，所以，我们尝试把整个页面的高度调成100%的高，代码如下：
/*比之前新增了一个page标签*/
page{
height: 100%;
}
.main{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
text-align: center；
}
看一下效果：
可以看到真个页面的高度填充了整个屏幕，子标签view的高度也达到了100%，文字也实现了上下和左右居中。
所以当你要实现标签上下左右居中的时候，看到没有效果，一定要看一下父标签的高度和宽度情况。
让我们来简单的分析一下wxss（css）代码：
display: flex;
justify-content:center
上面这行代码，可以使字标签靠上居中，但是需要配合display: flex;否则无效。
我从网上找了个图，大家可以直观的看下。
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，也就是子标签的上下对齐方式，同样需要配合display: flex;
做了个简单的例子给大家看：
所以搭配上面两行代码，就可以实现字标签的上下左右居中，
最后，大家一定不要忘记display: flex;
如有什么不对的地方，还请大家指正交流。
分享一下我做的小项目，基于AI图片识别的一个小工具，实现花草识别。大家有什么问题，可以留言共同交流。
