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

水平居中的实现可以利用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%
但是高度height:100%必须是在父元素的高度给定了的情况下才可以。
这个时候利用page{height:100%}就可以占满整个屏幕高度了。
最终代码为：

<!-- wxml -->
<view>水平垂直居中</view>

<!-- wxss -->
page{
  height: 100%;
}
view{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content:center;
  align-items:center;
  }

最终效果图：

同理，如果水平方向上出现问题也可以看一下是否是宽度的问题。