How do align content to the center in flexbox - css

Question

I have a item that i want to be align to the middle and one to the bottom.
I want the logo image in the center, but I can't figure out how to do it.
import React, { Component } from 'react';
import { Container, Content, Text, Button, View } from 'native-base';
import { StyleSheet, Image } from 'react-native'
export default class WelcomeScreen extends Component {
render() {
return (
<Container>
<Content contentContainerStyle={styles.container}>
<View style={styles.imgContainer}>
<Image
source={require('../../assets/images/logos/logo.png')}
/>
</View>
<View style={styles.btnContainer}>
<Button block primary onPress={() => this.props.navigation.navigate('Signin')} rounded>
<Text>Sign in</Text>
</Button>
<Button block light style={{ marginTop: 15 }} onPress={() => this.props.navigation.navigate('Signup')} rounded>
<Text>Sign up</Text>
</Button>
</View>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
imgContainer: {
flex: 1,
},
btnContainer: {
width: 300,
}
})

Answer 1

Try this
imgContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}

Answer 2

Here's an HTML CSS only example for you that you can easily tweak to solve your problem.
body {
margin: 0;
}
#main {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-between;
}
.container {
align-items: middle;
margin: 0 auto;
align-self: middle;
width: 300px;
height: 80px;
background-color: steelblue;
vertical-align: afar;
}
<div id="main">
<div class="container">
abc
</div>
<div class="container">
xyz
</div>
</div>
The trick lies in the following CSS properties:
flex-direction: column
justify-content: space-between

Answer 3

if you want the image to align center in the screen except for the button height, you can use the following code, and replace the view in ImageContainer to Image
render() {
return (
<Container>
<View
style={styles.imgContainer}>
<View style={{backgroundColor:'red',height:50,width:50}} />
</View>
<Content contentContainerStyle={styles.container}>
<View style={styles.btnContainer}>
<Button block primary onPress={() => this.props.navigation.navigate('Signin')} rounded>
<Text>Sign in</Text>
</Button>
<Button block light style={{ marginTop: 15 }} onPress={() => this.props.navigation.navigate('Signup')} rounded>
<Text>Sign up</Text>
</Button>
</View>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'flex-end'
},
imgContainer: {
position:'absolute',
justifyContent:'center',
alignItems:'center',
height:Dimensions.get('window').height-40,
width:Dimensions.get('window').width,
flex: 1,
},
btnContainer: {
height:200,
width: 300,
alignItems:'center',
justifyContent: 'flex-end',
marginBottom:20
}
})