Hippy 中如何正确设置 View 的 flex 布局才能垂直居中？

西门玉泽提问于 2026-03-05 10:55:20 阅读 16

移动

我在用 Hippy 开发一个移动端页面，想让子元素在父容器里垂直居中，但试了几次都不生效。明明写了 align-items: center，可内容还是贴在顶部。

是不是 Hippy 的 flex 行为和 Web 不一样？我这样写的代码：

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text>居中内容</Text>
</View>

Hippy 移动端框架

我来解答赞 9 收藏

反馈

1 条解答

司空亚美 Lv1

啊这个坑我踩过，hippy的flex要同时设 alignItems 和 justifyContent 才能垂直居中。你代码其实没问题，可能是父容器没设高度。

试试这样：



<View style={{ height: '100%', flex: 1, justifyContent: 'center', alignItems: 'center' }}>

  <Text>现在应该居中了</Text>

</View>

缺个height就容易不生效，熬到凌晨3点才发现的...

2026-03-05 12:03