支付宝小程序UI优化：一行元素垂直居中对齐

初入小程序这个领域，CSS，JS啥都不会，好不容易把几个组件排在了一行里，结果发现这几个小可爱打死都对不齐，经过一个下午的尝试总算得尝善果，记录一下，以兹来者。

绝对位置 + margin：

实现这个效果可以通过精准的计算一行中每个元素高度，然后通过margin的方式将左右上下的距离拿捏的稳稳当当的，除了计算麻烦些，其他的都很简单。这种方法的好处在于简单高效，不用过多考虑父子容器的关系。但是一旦换个手机就会出现灾难性的兼容性问题，真心不推荐。

flex布局 + margin：

这种方式是通过设置行容器flex布局，再给指定的子元素设置上下margin的auto，这样就能让这个指定的子元素在剩余空间里，水平垂直居中。由于我们想要将一行中多个元素有序排列，所以不建议直接使用margin: auto，而是使用margin-top : auto 和 margin-bottom : auto。

.checkAllBoxContainer {
  display: flex;
}

.checkAllBox {
  margin-left: 30rpx;
  margin-right: 12rpx;
  margin-top: auto;
  margin-bottom: auto;
}

效果展示