如何在flexbox中将内容对齐到中心答案

【问题标题】：How do align content to the center in flexbox如何在flexbox中将内容对齐到中心
【发布时间】：2020-03-01 09:00:12
【问题描述】：

我有一个要居中对齐、底部对齐的项目。

我想把标志图片放在中间，但我不知道怎么做。

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,
    }
})

【问题讨论】：

How to horizontally center a <div>?的可能重复

标签： css react-native flexbox native-base

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

这是一个仅适用于您的 HTML CSS 示例，您可以轻松调整以解决您的问题。

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>

诀窍在于以下 CSS 属性：

flex-direction: column
justify-content: space-between

【讨论】：

【解决方案3】：

如果你想让图片在屏幕中心对齐，除了按钮高度，你可以使用下面的代码，将ImageContainer中的视图替换为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
    }
})

【讨论】：