Html Flexbox样式-尝试将视图居中

我正在构建一个React本机应用程序，而我正在经历一段非常糟糕的时间来集中所有东西。一切都会稍微偏离中心：

  <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>

基于此，我希望我的loginbuttongroup垂直居中，每个LoginButton都是容器宽度的80%（设置为40%——如果再大一点，按钮就会离开屏幕）。除此之外，我还希望bottomtext位于底部。它甚至没有出现

---

我对flexbox有什么误解？我两周前刚拿起它，现在正忙得不可开交。

尝试将最外面的视图设置为

Justify content:center

，将所有按钮设置为

margin:auto

。如果定位是关闭的，有时这是因为边距与继承的css位对齐不正确

你必须给容器提供

内容对齐：中心

而不是容器中的元素

你能用代码笔这样我就可以帮你编写代码了吗？

.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;
}