⼩程序如何实现上下居中和左右居中显⽰我们先把原始代码贴上 index.wxml
<!--pages/index.wxml-->
<view>
<text>AI花草识别</text>
</view>
复制代码
/* pages/test.wxss 默认为空 */text align center
复制代码
显⽰效果如下： 可以看到，⽂字是默认居左显⽰的。
下⾯代码可以让⽂字居中，但是会有⼀个问题出现，⽂字没有上下居中。
<!--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；
}
复制代码
我们通过调试功能看⼀下
我们可以看到，整个页⾯的⾼度才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图⽚识别的⼀个⼩⼯具，实现花草识别。⼤家有什么问题，可以留⾔共同交流。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。