微信小程序居中布局

使用flex弹性布局可以快速实现所需要的布局（水平居中、垂直居中、左右对齐等）

使用简介

• 布局：display:flex
• 属性：justify-content和align-items
• flex-direction(轴线方向): row(水平，默认)、column(垂直)
• justify-content: flex子项的主轴排列方式，取值包括：flex-start | flex-end | center | space-between | space-around
• align-items: flex子项的侧轴排列方式，取值包括：flex-start | flex-end | center | stretch
• flex-wrap：子元素溢出处理，取值包括：nowrap(不换行) | wrap(顺序换行) | wrap-reverse(逆序换行)

轴线举例：父级元素使用flex布局，默认布局下块级元素是会换行的，但设置flex布局后即可水平排列。注：当横向排列时 主轴就是x轴；反之则是y轴。

水平居中

.gravity-horizontal-center{
  display:flex;
  justify-content:center;
}

垂直居中

.gravity-vertical-center{
  display:flex;
  align-items:center;
}

水平垂直全部居中

.gravity-center{
  display:flex;
  justify-content:center;
  align-items:center;
}