html - Flexbox 样式 - 试图使 View 居中

Question

我正在构建一个 React Native 应用程序，但我很难把一切都放在中心位置。一切总是稍微偏离中心:

  <View style={{
    flex: 1,
    flexDirection: 'column',
  }}>
    <View styleName="green-header">
      <Text styleName="green-header-text">Log In to Your Account</Text>
    </View>
    <View styleName="loginbuttongroup">
      <TouchableOpacity styleName="googlered loginbutton" onPress={() => this.onGoogleLoginButtonPress()}>
        <Text styleName="login-text">Log In with Google</Text>
        <Image styleName="login-img" sourcec={GoogleImg} />
      </TouchableOpacity>
      <TouchableOpacity styleName="facebookblue loginbutton"
        self={this} onPress={() => this.onFBLoginButtonPress()}>
        <Text styleName="login-text">Log In with Facebook</Text>
        <Image styleName="login-img" source={FBImg} />
      </TouchableOpacity>
    </View>
    <TouchableOpacity styleName="bottomtext">
      <Link to="/signup/">
        <View styleName="bottomtext-text-view"><Text styleName="bottomtext-text">Don't have an account? Sign Up</Text></View>
      </Link>
    </TouchableOpacity>
  </View>

我正在使用一个允许我编写样式(如 CSS)的模块(这就是上面的 styleName 属性所应用的):

.green-header {

  height: 40;
  width: 400;
  margin-top: 20;
  align-items: center;
}
.green-header-text {
  height: 40;
  width: 200;
  color: #31bdbc;
  font-size: 16;
}
.login-text {
  color: #fff;
}
.facebookblue {
  background-color: #3b5998;
  color: #fff;
}
.googlered {
  background-color: #db3236;
  color: #fff;
}
.loginbutton {
  width: 80%;
  font-size: 14px;
  margin-top: 5;
  justify-content: center;
  align-items: center;
}
.loginbuttongroup {
  height: 400;
  width: 40%;
  justify-content: center;
  align-items: center;

}
.login-img {
  width: 20;
  height: 20;
  align-self: flex-end;
}
.bottomtext {
  width: 300;
  height: 300;
align-self: flex-end;
}
.bottom-text-text-view {
  width: 50;
  height: 50;
}
.bottomtext-text {

  color: #31bdbc;
  font-size: 14px;
}

现在基于此，我希望我的 loginbuttongroup 垂直居中，并且我的每个 loginbuttons 都是容器宽度的 80%(设置为 40% - 如果我把它做得更大，按钮会离开屏幕)。除此之外，我希望 bottomtext 位于底部。它甚至没有出现。

我对这里的 flexbox 有什么误解？我两周前刚拿起它，我很难把它做好。

Answer 1

尝试将最外面的 View 设置为 Justify-content: center 并将所有按钮设置为 margin: auto。如果定位不正确，有时是因为边距从继承的 css 位不正确对齐。