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

直接上示例代码

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