微信小程序之水平垂直居中

最新推荐文章于 2025-04-23 19:32:10 发布

qq_43522588

最新推荐文章于 2025-04-23 19:32:10 发布

阅读量1.1k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_43522588/article/details/104344366

版权

本文探讨了在微信小程序中如何使用flex布局实现元素的水平和垂直居中。通过设置`justify-content:center;`和`align-items:center;`实现水平居中，但发现仅水平居中，垂直方向未生效。问题出在页面高度未设置。解决方案是将page的样式设置为`height:100%`，确保父元素占满屏幕高度，从而达到垂直居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平居中的实现可以利用flex布局
使用属性：
justify-content:center;
align-items:center;

操作代码如下：

<view>水平垂直居中</view>

view{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content:center;
  align-items:center;
  }

效果图如下：
在这里插入图片描述
咦，为什么只实现了水平居中，垂直方向上没有任何变化？那么问题出在哪儿了呢？在代码上看不出来问题，最后打开视图调试页，发现高度出现了问题。

虽然view的高度为page的100%，但是page的高度不是整个屏幕的高度。
所以这个时候发现，要想让view在屏幕上垂直居中，只要再使它的父类占满整个屏幕就可以了。
在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。
宽度很简单就是width:100%<