UniApp View 高度 100% 不生效？解决垂直居中问题

在 UniApp 中，设置 view 的高度为 '100%' 是不生效的，因为在移动端开发中，高度的百分比是相对于父元素的高度的，而在 UniApp 中，父元素的高度是由其子元素的高度决定的，并且在布局中，子元素的高度是由内容决定的。所以设置 view 的高度为 '100%' 是无效的。

要实现盒子的垂直居中，可以使用 flex 布局。在代码中，已经使用了 flex 布局，但是由于设置 view 的高度为 '100%' 无效，导致无法垂直居中。

解决这个问题的方法是，给父容器设置一个固定的高度，然后将子元素的高度设置为 '100%'，这样就可以实现盒子的垂直居中了。

修改后的代码如下：

<view class='center'>
  <view class='box' style='background-color: blue'>居中文字1</view>
  <view class='box' style='background-color: yellow'>居中文字2</view>
</view>

.center {
  height: 300px; /* 设置一个固定的高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: red;
}
.box {
  height: 100%; /* 子元素的高度为 100% */
}

在上面的代码中，给父容器 .center 设置了一个固定的高度 300px，子元素 .box 的高度设置为 '100%'，这样就实现了盒子的垂直居中。