解决 flex align-items：center 无法居中（微信小程序）

转自：https://www.cnblogs.com/zzd0916/p/7218451.html 进击的小牛牛
因为最近再做小程序，需要用到flex布局，因为写惯了web项目，初次学习确实感弹性布局的强大（关键是不用再管可恶的ie了）。

但是也遇到了align-items：center无法居中的问题，想了很久终于找到了解决办法。

解决方法：

1.确定好自己的主轴方向是不是row，如果是column，那么恭喜你，align-items:center是不起效果的，这时候你可以试试justify-content:center,是不是居中了呢？（ps:这个问题我花了半天时间才弄明白，之前一直以为align-items只是控制上下居中的，没有注意主轴的方向）

2.在带有数字的view或者text标签中不能上下居中,布局如下：

情况1：都是中文的情况下，给view加上align-items:center 其实是能居中的。

<view>
    <text> 内容一 </text>
    <text> 内容二 </text>
    <text> 内容三 </text>
</view>

情况2： 只要带有数字的情况下，view加上align-items:center部分手机上看着是不居中的（泡泡的是父元素加align-items:center解决的！！！）

<view>
    <text> 内容22 </text>
    <text> 我是对不齐的 555   </text>
    <text> 内容三 </text>
</view>

这时候可能显示就不正常的，带数字的可能会偏上一点，解决的办法我找到了两个：

1.，如果这个只是展示一部分信息，控制在一行之内显示，那么可以给这个view设置高度行高，这样他们就能垂直居中显示了。

2. 如果需要显示不止一行的话，那就只能把他们都放在同一个text或者view里面，这样他们也能垂直居中显示。这样的缺点就是不好通过css控制每个内容之间的距离。结构如下：

<view>
    <text> 内容22 我是对不齐的 555    内容三 </text>
</view>