display flex 左右_微信小程序入门-如何实现上下居中和左右居中显示

我们先把原始代码贴上
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图片识别的一个小工具，实现花草识别。大家有什么问题，可以留言共同交流。