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

最新推荐文章于 2024-11-02 20:00:59 发布

安小平

最新推荐文章于 2024-11-02 20:00:59 发布

阅读量4.5k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序

原文链接：https://www.jianshu.com/p/869425b79546

版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文通过示例代码详细解析了在WXML与WXSS中如何利用Flex布局实现元素的水平和垂直居中，特别关注了height:100%在实际应用中的常见问题，并提供了动态设置高度和使用position:absolute的替代方案。

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

直接上示例代码

//wxml
<view class='main'>
    <view>水平垂直居中</view>
</view>

//wxss
.main {
  display: flex;
  align-items: center;
  justify-content: center;  
  width: 100%;
  height: 100%;
}

but 效果跟我想的完全不一样 ?

尽然只水平居中了。。。

然后开始分析样式代码
当 display: flex 配合 justify-content: center 使用时可以让view水平居中
而配合 align-items: center 用时可以实现垂直居中效果
那为什么我们这里没有垂直居中呢？
。。。
。。。
。。。

最后当我打开视图调试页后突然发现父容器的高度竟然跟子 view 的高度一样。

mamaipi

看到这相信大家都知道问题出在哪了吧！
对，就是 100% height 并没有生效，那让我先试试写一个固定的高度 height: 300px 看看效果

果然子view终于下去了- -

这样我们想让它真正的垂直居中的话只需要通过system.windowHeight 动态设置高度就好了。
同理，如果出现水平居中失效的情况也可以看下是否是宽度的问题。

当然直接用 position: absolute 也可以让宽高正确填充。而对于绝对定位的使用就需要自己把握了，毕竟会对布局造成一定影响

  width:100%;
  height:100%;
  position:  absolute

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

but 效果跟我想的完全不一样 ?

END！