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

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

·氓

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

阅读量841

点赞数

分类专栏：微信开发文章标签：小程序 view 居中

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

版权

微信开发专栏收录该内容

16 篇文章

订阅专栏

//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

END！

分享一个学习小程序的开源项目
https://github.com/zzjian/wx-wanandroid

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